BootStrap中Table分页插件使用详解

 更新时间:2016年10月09日 10:13:43   投稿:mrr  
bootstrap-table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化。这篇文章介绍了bootstrap中table分页插件的使用,感兴趣的朋友一起看看吧

分页(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分页插件使用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • jQuery实现文字自动横移

    jQuery实现文字自动横移

    本文详细介绍了通过jquery尺寸相关函数实现文字自动横移的方法。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • JS实现添加,替换,删除节点元素的方法

    JS实现添加,替换,删除节点元素的方法

    这篇文章主要介绍了JS实现添加,替换,删除节点元素的方法,实例分析了javascript针对节点元素的替换、删除及常用的几种添加技巧,需要的朋友可以参考下
    2016-06-06
  • php简单数据库操作类的封装

    php简单数据库操作类的封装

    这篇文章主要为大家详细介绍了php简单数据库操作类的封装,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JavaScript中的二进制数据处理方法详解

    JavaScript中的二进制数据处理方法详解

    Blob、ArrayBuffer和Buffer是JavaScript中用于表示和操作二进制数据的三种主要方式,本文将深入探讨这些概念,以及它们如何在JavaScript中使用,需要的可以参考一下
    2023-06-06
  • JavaScript模块化原理深入分析

    JavaScript模块化原理深入分析

    JavaScript中的模块化是指将每个js文件会被认为单独一个的模块。模块之间是互相不可见的。如果一个模块需要使用另一个模块,那么需要通过指定语法来引入要使用的模块,而且只能使用引入模块所暴露的内容
    2022-11-11
  • js实现图片360度旋转

    js实现图片360度旋转

    本文主要介绍了js实现图片360度旋转的思路与方法。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • JavaScript 10件让人费解的事情

    JavaScript 10件让人费解的事情

    JavaScript 可算是世界上最流行的编程语言,它曾被 Web 开发设计师贴上噩梦的标签,虽然真正的噩梦其实是 DOM API,这个被大量的开发与设计师随手拈来增强他们的 Web 前端的脚本语言,如今越来越被重视,虽则如此,JavaScript 仍然拥有很多让人费解的东西。
    2010-02-02
  • json与jsonp知识小结(推荐)

    json与jsonp知识小结(推荐)

    这篇文章主要介绍了json与jsonp知识小结(推荐)的相关资料,需要的朋友可以参考下
    2016-08-08
  • JavaScript实现简单的音乐播放器

    JavaScript实现简单的音乐播放器

    这篇文章主要为大家详细介绍了JavaScript实现简单的音乐播放器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • JavaScript中类型的强制转换与隐式转换详解

    JavaScript中类型的强制转换与隐式转换详解

    类型强制Coercion是将值从一种类型转换为另一种类型的过程(例如字符串转换为数字,对象转换为布尔值等),下面这篇文章主要给大家给大家介绍了JavaScript中类型的强制转换与隐式转换的相关资料,需要的朋友可以参考下
    2021-08-08

最新评论