<强>一、前言
,,,bootstrap-table是非常方便好用的前端表格分页插件,使用者只需要提供数据源就能实现非常完美的分页效果,其分页方式可以分成客户端分页和服务端分页,其接收的数据源都是json数据格式。服务端分页在项目中应用得非常的广泛,但有时也需要使用客户端分页来加快分页速度,加快分页浏览效率。本篇博客就不介绍服务端分页,只提供bootstrap-table客户端分页的简单例子(数据源也从前端获取),供初学者了解使用。
<强>二,实例
& lt; title> bootstrap-table表格客户端分页& lt;/title>
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/bootstrap/css/bootstrap/bootstrap.css " rel=巴獠縩ofollow”/比;
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/bootstrap-table/bootstrap-table.css " rel=巴獠縩ofollow”/比;
& lt;脚本src=" https://www.yisu.com/zixun/jquery/jquery.min.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/bootstrap/js/bootstrap.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/bootstrap-table/bootstrap-table.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/bootstrap-table/bootstrap-table-export.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/extends/tableExport/jquery.base64.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/extends/tableExport/tableExport.js "祝辞& lt;/script>
& lt;/head>
& lt;身体比;
& lt; div id=皉eportTableDiv”比;
& lt;表id=" reportTable "祝辞& lt;/table>
& lt;/div>
& lt;脚本type=" text/javascript祝辞//手动制造30条数据
var数据=[];
我(var=0; i<30;我+ +){
数据[我]={“名称”:“傻逼”+我+“号”,“年龄”:“年龄:”+我+“岁”,“性”:“男”+我}
}
$(函数(){
$ (' # reportTable ') .bootstrapTable ({
方法:“得到”,
缓存:假的,
身高:400,
条纹:没错,
分页:没错,
页大小:20,
pageNumber: 1、
pageList:(10、20、50、100、200、500],
搜索:没错,
showColumns:没错,
showRefresh:假的,
showExport:假的,
exportTypes:(“csv”、“三种”,“xml”),
搜索:没错,
clickToSelect:没错,
列:
(
{字段:“检查”,复选框:真},
{字段:“名字”,标题:“测试姓名”,对齐:“中心”,valign:“中产”,可分类的:"真正的"},
{字段:“年龄”,标题:“年龄”,对齐:“中心”,valign:“中产”,可分类的:"真正的"},
{字段:“性”,标题:“性”别,对齐:“中心”,valign:“中产”,可分类的:"真正的"},
),
数据:数据,
});
});
& lt;/script>
& lt; div>
& lt;/body>
& lt;/html>
之前
<强>三,总结
,,,1. bootstrap-table客户端分页只需要几个步骤即可实现:引入引导的js, css, html页面添加一个表标签同时给id赋值;js添加初始化代码;
,,,2.bootstrap-table客户端分页的数据源可以是服务器端传递过来,也可以是前端js获取,该实例使用的是前端js的数据源,初始化参数需要添加数据,同时去掉url;
,,3 .本博客的实例下载路径
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
