bootstrap-table实现ajax分页

bootstrap版本 为 3.X

bootstrap-table.min.css 
bootstrap-table-zh-CN.min.js 
bootstrap-table.min.js

前端bootstrap+jQuery，服务端使用Laravel5.5实现restful风格服务

前端代码块

html部分：

<table id="mytab" class="table table-hover"></table>

javascript部分：

//定义表格内按钮的绑定事件，一定要写在表格初始化之前，否则会找不到该事件而报错
window.add_event= {
    'click #show_logs': function (e, value, row, index) {
    ...
    }
};

//根据窗口调整表格高度
$(window).resize(function() {
    $('#mytab').bootstrapTable('resetView', {
        height: tableHeight()
    })
})
//生成用户数据
$('#mytab').bootstrapTable({
    method: 'post',
    contentType: "application/x-www-form-urlencoded",//必须要有！！！！
    url:"{{url('/...')}}",//要请求数据的文件路径
    height:tableHeight(),//高度调整
    toolbar: '#toolbar',//指定工具栏
    striped: true, //是否显示行间隔色
    dataField: "row",//bootstrap table 可以前端分页也可以后端分页，这里
    //我们使用的是后端分页，后端分页时需返回含有total：总记录数,这个键值好像是固定的
    //rows： 记录集合 键值可以修改  dataField 自己定义成自己想要的就好
    pageNumber: 1, //初始化加载第一页，默认第一页
    pagination:true,//是否分页
    queryParamsType:'',//查询参数组织方式
    queryParams:queryParams,//默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
                            // 设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber，这里设置为''方便查询
    sidePagination:'server',//指定服务器端分页
    pageSize:10,//单页记录数
    pageList:[5,10,20,30],//分页步进值
    showRefresh:true,//刷新按钮
    showColumns:true,
    clickToSelect: true,//是否启用点击选中行
    toolbarAlign:'right',//工具栏对齐方式
    buttonsAlign:'right',//按钮对齐方式
    toolbar:'#toolbar',//指定工作栏
    sortOrder:'desc',//设置查询排序方式
    columns:[
    {
        title:'ID',
        field:'id',
        sortable:true,
        // visible:false
    },
    {
    title:'操作',
    field:'button',
    formatter:addButton(),//添加按钮，看下面
    events:add_event，//给添加的按钮绑定事件，看上面
    }
],
    locale:'zh-CN',//中文支持,
    responseHandler:function(res){
    //在ajax获取到数据，渲染表格之前，修改数据源
        res = {total:res.total,row:res.data};
        console.log(res);
        return res;
}
})
function addButton(value,row,index) {
    return [
        '<button id="show_logs" type="button" class="btn btn-primary RoleOfedit">查看日志</button>'
    ].join('');
}

在前端通过请求获取table数据时，bootstrap table会默认拼一个 searchText的参数，来支持查询功能。

最后再说一句，了解一个插件最快的方法是查文档，能走好多弯路~