bootstrap 表格 ajax,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部分：

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 [

'查看日志'

].join('');

}

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

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