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 关于# 和 void的区别分析
Oct 26 Javascript
JavaScript变量声明详解
Nov 27 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 Javascript
vue项目中使用scss的方法步骤
May 16 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
Jun 14 Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 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
杏林同学录(五)
2006/10/09 PHP
smtp邮件发送一例
2006/10/09 PHP
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
php json相关函数用法示例
2017/03/28 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
基于jquery的超简单上下翻
2010/04/20 Javascript
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
javascript动画浅析
2012/08/30 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
常用python数据类型转换函数总结
2014/03/11 Python
Python中的闭包总结
2014/09/18 Python
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解
2020/03/30 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
装潢设计实习自我鉴定
2013/09/19 职场文书
保安自我鉴定范文
2013/12/08 职场文书
高中毕业的自我鉴定
2013/12/09 职场文书
小区门卫工作职责
2013/12/14 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
校运会新闻稿
2015/07/17 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书