BootStrap中Table分页插件使用详解

前端之家收集整理的这篇文章主要介绍了BootStrap中Table分页插件使用详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

分页(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

猜你在找的Bootstrap相关文章