BootStrap中Table分页插件使用详解

分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页

bootstrap-table介绍

bootstrap-table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化。

下载地址

https://github.com/wenzhixin/bootstrap-table/archive/1.11.0.zip

使用方式

引入css和js

rush:js;">

2. table数据填充

bootstrap-table获取数据有两种方式,一是通过table 的data-url属性指定数据源,二是通过JavaScript初始化表格时指定url来获取数据

rush:js;"> ... datafield: "rows",cache: false,//是否使用缓存,认为true striped: true,//是否显示行间隔色 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 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

相关文章

Bootstrip HTML 查询搜索常用格式模版 <form class=&...
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
要让两个按钮左右排列,你可以使用 Bootstrap 的网格系统将它...
是的,可以将status设置为布尔类型,这样可以在前端使用复选...
前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自...
起步导入:<linkrel="stylesheet"href="b...