bootstrap-table表格客户端分页实例

一、前言

1.使用bootstrap-table表格插件,只要有json数据格式的数据源,即可随心所欲

2.本博客只展示了前端分页实例(PS:该插件两种分页方式:前端分页、服务端分页)

3.废话不多说,实例开始

二、实例demo

1.引入资源部分

1. <script src="http://code.jquery.com/jquery-latest.js"></script>

2. <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

3. <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">

4. <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>

5. <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>

2.html+js

1. <table id="table"></table>

2. <script type="text/javascript">

3. //没有请求,自己写50条数据

4. var datas = [];

5. for(var i=0;i<50;i++){

6. datas[i]={"name":i+"号","age":i+"岁"}

7. }

8. $('#table').bootstrapTable({

9. pagination: true,

10. pageSize: 20,

11. pageNumber:1,

12. sidePagination:'client',

13. paginationFirstText: "首页",

14. paginationPreText: "上一页",

15. paginationNextText: "下一页",

16. paginationLastText: "末页",

17. iconSize: 'pager',

18. columns: [{field:"name",title:"编号",align:"center",valign:"middle",sortable:"true"},

19. {field:"age",title:"年龄",align:"center",valign:"middle",sortable:"true"}],

20. data:datas,

21. });

22. </script>

三.总结

demo可适用于本地加载数据(即前端获取数据来源后在进行加载),当然,获取到的数据源格式要为json数据格式哦!切忌

好久没系统的引用这个插件了,这次来复习下,demo简单但实用

PS:好紧张好紧张,第一次来分享姿势~~

参考地址 https://blog.csdn.net/gyysmile/article/details/80226917