BootStrap中Table分页插件使用详解


Posted in Javascript onOctober 09, 2016

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

bootstrap-table介绍

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

下载地址

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

使用方式

引入css和js

<!--css样式-->
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap/bootstrap-table.css" rel="stylesheet">
<!--js-->
<script src="js/bootstrap/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/bootstrap/bootstrap-table.js"></script>
<script src="js/bootstrap/bootstrap-table-zh-CN.js"></script>

2. table数据填充

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

<table id="screenTable" data-toggle="table">
<thead>
...
</thead>
</table>
$(function () {
$('#screenTable').bootstrapTable({
url: "/screen/list",
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: "定制名称",
align: "center",
valign: "middle",
formatter: 'infoFormatter'
}, {
field: "time",
title: "定制时间",
align: "center",
valign: "middle"
}],
formatNoMatches: function () {
return '无符合条件的记录';
}
});
$(window).resize(function () {
$('#screenTable').bootstrapTable('resetView');
});
});
function infoFormatter(value, row, index) {
return '<a href=/screen/' + row.id + ' target="_blank">' + row.name + '</a>';
}

效果图如下

BootStrap中Table分页插件使用详解

以上所述是小编给大家介绍的BootStrap中Table分页插件使用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 常用方法总结
Jun 03 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
js实现简单的左右两边固定广告效果实例
Apr 10 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
细说Vue组件的服务器端渲染的过程
May 30 Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
JavaScript命名空间模式实例详解
Jun 20 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 Javascript
微信小程序 for 循环详解
Oct 09 #Javascript
微信小程序 条件渲染详解
Oct 09 #Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 #Javascript
最实用的jQuery分页插件
Oct 09 #Javascript
js本地图片预览实现代码
Oct 09 #Javascript
js html css实现复选框全选与反选
Oct 09 #Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 #Javascript
You might like
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
js调用图片隐藏&amp;显示实现代码
2013/09/13 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
jQuery plugin animsition使用小结
2017/09/14 jQuery
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
在Python下尝试多线程编程
2015/04/28 Python
Django admin美化插件suit使用示例
2017/12/12 Python
python实现聊天小程序
2018/03/13 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
Python中new方法的详解
2019/01/15 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
Django框架表单操作实例分析
2019/11/04 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
求职简历推荐信范文
2013/12/02 职场文书
网络工程师专家职业发展路线
2014/02/14 职场文书
材料加工工程求职信
2014/02/19 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书
Mysql数据库命令大全
2021/05/26 MySQL
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python