https://blog.csdn.net/ryuenkyo/article/details/106194123

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [

    {
      "library": "bootstrap-treeview@1.2.0",
      "destination": "wwwroot/lib/bootstrap-treeview/"
    },
    {
      "library": "bootstrap@4.6.2",
      "destination": "wwwroot/lib/bootstrap/"
    },
    {
      "library": "jquery@2.2.4",
      "destination": "wwwroot/lib/jquery/"
    },
    {
      "library": "jquery-validate@1.21.0",
      "destination": "wwwroot/lib/jquery-validate/"
    },
    {
      "library": "bootstrap-table@1.18.0",
      "destination": "wwwroot/lib/bootstrap-table/"
    },
    {
      "library": "popper.js@1.14.7",
      "destination": "wwwroot/lib/popper.js/"
    }

  ]
}

<table id="grid"></table>

<script>

    $(function () {
        InitMainTable()
    });
    var $table;
    //初始化bootstrap-table的内容
    var url = "/Test/FindWithPager?rnd=" + Math.random();
    //var url = "/js/site.json?rnd=" + Math.random();
    function InitMainTable () {
        //记录页面bootstrap-table全局变量$table，方便应用
        $table = $('#grid').bootstrapTable({
            url: url,                      //请求后台的URL（*）
            method: 'GET',                      //请求方式（*）
            //toolbar: '#toolbar',              //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
            pageSize: 2,                     //每页的记录行数（*）
            pageList: [2,3,5,10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: false,                      //是否显示表格搜索
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列（选择显示的列）
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                  //是否显示父子表
            //得到查询的参数
            queryParams : function (params) {
                //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
                var temp = {   
                    pageSize: params.limit,                         //页面大小
                    pageNumber: (params.offset / params.limit) + 1,   //页码
                    sort: params.sort,      //排序列名  
                    sortOrder: params.order //排位命令（desc，asc） 
                };
                return temp;
            },
            columns: [{
                checkbox: true,  
                visible: true                  //是否显示复选框  
            }, {
                field: 'name',
                title: '姓名',
                sortable: true
            }, {
                field: 'mobile',
                title: '手机',
                sortable: true
            }, {
                field: 'email',
                title: '邮箱',
                sortable: true,
                formatter: emailFormatter
            }, {
                field: 'homepage',
                title: '主页',
                formatter: linkFormatter
            }, {
                field: 'birthDate',
                title: '出生日期',
                //formatter: dateFormatter
            }, {
                field: 'hobby',
                title: '兴趣爱好'
            }, {
                field: 'gender',
                title: '性别',
                sortable: true
            }, {
                field: 'age',
                title: '年龄'
            },  {
                field: 'height',
                title: '身高'
            }, {
                field: 'note',
                title: '备注'
            }, {
                field:'id',
                title: '操作',
                width: 120,
                align: 'center',
                valign: 'middle',
                //formatter: actionFormatter
            }, ],
            onLoadSuccess: function () {
            },
            onLoadError: function () {
                showTips("数据加载失败！");
            },
            onDblClickRow: function (row, $element) {
                var id = row.ID;
                EditViewById(id, 'view');
            },
        });
    };

    //连接字段格式化
    function linkFormatter(value, row, index) {
        return "<a href='" + value + "' title='单击打开连接' target='_blank'>" + value + "</a>";

    }
    //Email字段格式化
    function emailFormatter(value, row, index) {
        return "<a href='mailto:" + value + "' title='单击打开连接'>" + value + "</a>";

    }
    //性别字段格式化
    function sexFormatter(value) {
        if (value == "女") { color = 'Red'; }
        else if (value == "男") { color = 'Green'; }
        else { color = 'Yellow'; }

        return '<div  style="color: ' + color + '">' + value + '</div>';

    }
</script>

 public JsonResult FindWithPager(int pageSize, int pageNumber, string sort, string sortOrder)
 {
    var list = new List<UserVM>()
    {
        new(){ Id = 1, Name = "s", BirthDate="s", Email="s", Gender="f", Height="f", Hobby= "s", Homepage="f", Mobile="f", Note="" }
    };
    var result = new { total = list.Count(), rows = list.OrderBy(c => c.Id).Skip(pageSize * (pageNumber - 1)).Take(pageSize).ToArray() };
    return Json(result);
}

注意: Bootstrap-table大小写,返回的数据大小写问题

转载请注明：SuperIT » Bootstrap-table 使用