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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
jquery JSON的解析方式
Jul 25 Javascript
jQuery学习4 浏览器的事件模型
Feb 07 Javascript
js中settimeout方法加参数的使用实例
Feb 27 Javascript
javascript中闭包(Closure)详解
Jan 06 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 Javascript
vue实现锚点定位功能
Jun 29 Vue.js
微信小程序 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
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
vue实现扫码功能
2020/01/17 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
python版大富翁源代码分享
2018/11/19 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
Python如何将模块打包并发布
2020/08/30 Python
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
酒店营销策划方案
2014/02/07 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis