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 相关文章推荐
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
js性能优化技巧
Nov 29 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
Javascript操作表单实例讲解(下)
Jun 20 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
js生成随机数方法和实例
Jan 17 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 Javascript
vue使用watch监听属性变化
Apr 30 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
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
浅析ThinkPHP中的pathinfo模式和URL重写
2014/01/06 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
js中更短的 Array 类型转换
2011/10/30 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
Js中使用正则表达式验证输入是否有特殊字符
2018/09/07 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python中的set实现不重复的排序原理
2018/01/24 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
Python 多维List创建的问题小结
2019/01/18 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
Django 返回json数据的实现示例
2020/03/05 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
实习教师自我鉴定
2013/12/12 职场文书
会议接待欢迎词
2014/01/12 职场文书
企业管理标语
2014/06/10 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
网站出售协议书范文
2014/10/10 职场文书
校运会加油稿大全
2015/07/22 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL