之前使用Bootstrap Table做的功能一直是通过服务器接口请求数据填充到表格中，分页也是在服务器端实现，今天做一个功能需要通过在客户端实现数据填充展示以及分页，然后发现填入数据方式以及数据格式，都不太一样，下面是实现代码：

    <div class="row" style="margin-left: 0px; margin-right: 5px;">
      <div>
        <table id="dataGrid" class="table text-nowrap"></table>
      </div>
    </div>
  
    <script type="text/javascript"> 
    
        $(function() {
            $('#dataGrid').bootstrapTable({
                height : 330,
                striped : true,
                pagination : true,
                pageSize : 10,
                sortName : 'userName',
                sidePagination : 'client',  //配置客户端分页方式
                columns : [ 
                    {
                        field : 'userName',
                        title : '用户名称'
                    }, 
                    {
                        field : 'userMobile',
                        title : '手机号'
                    },
                    {
                        title : "操作",
                        formatter : function(value, row, index){
                            var str = "";
                            str += "<a onclick='del(\"userMobile\", \"" + row.userMobile + "\");' "
                            + "href='javascript:void(0);' class='btn btn-mini btn-danger' >"
                            + "删除" + "</a>";
                            return str;
                        }
                    }
                ]
            });
        });
        
        //删除一行数据
        function del(field, value){
            $('#dataGrid').bootstrapTable('remove', {field: field, values: [value]});
        }
        
        //生成数据
        function createData() {
            var rows = [];//创建数组
            for (var i = 1; i < 15; i++) {
                var row = {};//创建对象
                row.apartmentName = "name";
                row.userMobile = "22" + i;
                rows.push(row);
            }
           
            //如果sidePagination设置为server, 则数据结构为: {total: 15, rows: [1, 2, 3...]}
            /* var data = {};
            data.total = rows.length;
            data.rows = rows; */
           
            //如果sidePagination设置为client, 则数据结构为一个数组对象
            $('#dataGrid').bootstrapTable('load', rows);
        }
        
        $(function(){
            createData();
        })
    </script>

下面是实现效果：

image.png

参考：
1、 bootstrap table load数据
2、 前端js如何生成一个对象，并转化为json字符串