分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页。
bootstrap-table介绍
bootstrap-table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化。
下载地址
https://github.com/wenzhixin/bootstrap-table/archive/1.11.0.zip
使用方式
引入css和js
2. table数据填充
bootstrap-table获取数据有两种方式,一是通过table 的data-url属性指定数据源,二是通过JavaScript初始化表格时指定url来获取数据
...
显示行间隔色
pagination: true,//是否显示分页
pageSize: 10,//每页的记录行数
pageNumber: 1,//初始化加载第一页,默认第一页
pageList: [10,20,50],//可供选择的每页的行数
search: true,//是否显示表格搜索
showRefresh: true,//是否显示刷新按钮
clickToSelect: true,//是否启用点击选中行
toolbar: "#toolbar_screen",//工具按钮用哪个容器
sidePagination: "server",//分页方式:client客户端分页,server服务端分页
queryParamsType: "limit",//查询参数组织方式
columns: [{
field: "id",title: "ID",align: "center",valign: "middle"
},{
field: "name",title: "定制名称",valign: "middle",formatter: 'infoFormatter'
},{
field: "time",title: "定制时间",valign: "middle"
}],formatNoMatches: function () {
return '无符合条件的记录';
}
});
$(window).resize(function () {
$('#screenTable').bootstrapTable('resetView');
});
});
function infoFormatter(value,row,index) {
return '';
}
效果图如下
以上所述是小编给大家介绍的BootStrap中Table分页插件使用详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
原文链接:https://www.f2er.com/bootstrap/45348.html