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 相关文章推荐
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
Textarea与懒惰渲染实现代码
Jan 04 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 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
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
详解如何探测小程序返回到webview页面
2019/05/14 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
Python中将字典转换为列表的方法
2016/09/21 Python
Python自定义简单图轴简单实例
2018/01/08 Python
Python 记录日志的灵活性和可配置性介绍
2018/02/27 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
python中uuid模块实例浅析
2020/12/29 Python
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
大学生求职信范文应怎么写
2014/01/01 职场文书
竞选村长演讲稿
2014/04/28 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
罚款通知怎么写
2015/04/22 职场文书
2015年商场工作总结
2015/04/27 职场文书
父亲去世追悼词
2015/06/23 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
导游词之山西关帝庙
2019/11/01 职场文书