Bootstrap分页表格插件使用教程


本文摘自PHP中文网,作者angryTom,侵删。

本篇文章介绍了Bootstrap分页表格插件的使用方法,bootStrap table获取数据有两种方式,一是通过table 的data-url属性指定数据源,二是通过JavaScript初始化表格时指定url来获取数据。

Bootstrap分页表格插件使用教程

找了两个table的插件,一个是bootstrap table ,另一个是bootstrap-paginator

这里只介绍 bootstrap table 插件 使用及简单案例

文档介绍:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

推荐视频教程:Bootstrap教程

1. 引入js、css文件

1

2

3

4

5

6

<link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

<link href="http://cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.css">

<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>

<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<script src="http://cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>

<script src="http://cdn.bootcss.com/bootstrap-table/1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>

2.table数据填充

bootStrap table获取数据有两种方式,一是通过table 的data-url属性指定数据源,二是通过JavaScript初始化表格时指定url来获取数据*

注意:使用data-toggle="table"的话,js操作就会失效,反之生效

1

2

3

4

5

6

7

8

9

<table data-toggle="table">

 <thead>

 ...

 </thead>

</table>

     

$('#table').bootstrapTable({

  url: 'data.json'

 });

3. js获取数据的案例及释义

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<div class="panel panel-default">

            <div class="panel-body table-responsive">

         

    <div class="query-div" id="toolbar">

        <form class="form-inline" role="form" id="query_form">

            <div class="form-group query-form-group">

                <label for="status">状态</label>

                <select class="form-control" id="with_appr_status"

                    <option value="">全部</option>

                    <option value="S1">待处理</option>

                    <option value="S2">已处理</option>

                </select>

            </div>

            <div class="form-group query-form-group">

                <button type="button" class="btn btn-default" id="with_query">查询</button>

            </div>

        </form>

    </div>

                <table id="query_results" class="table table-hover">

                    <thead>

                    <tr>

                        <th data-field="code">编号</th>

                        <th data-field="time">申请时间</th>

                        <th data-field="status" data-formatter="formatStatus">提现状态</th>

                        <th data-field="remark">备注</th>

                    </tr>

                    </thead>

                </table>

            </div>

</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

//注意

//1. contentType: "application/x-www-form-urlencoded"  想要后台使用struts来接受数据,或者使用对象.属性的方法获取,需要配置这个form,默认是“json”

//2. pageNo 第几页,需要使用“Math.ceil(params.offset/params.limit) + 1”来计算,params.pageNumber一直获取的是第一页

loadData();//默认查询

function loadData(){

//表格id

$('#query_results').bootstrapTable({

        url: '/test'//请求后台的URL(*)

        method: 'post',   //请求方式(*)

        contentType: "application/x-www-form-urlencoded",//需要设置为这个参数,后台才能通过对象获取值,这里要注意

        dataType: "json",//期待返回数据类型

        toolbar: '#toolbar'//工具按钮用哪个容器

        toolbarAlign: "left",//工具栏对齐方式

        striped: true,   //是否显示行间隔色

        cache: false,   //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)

        pagination: true,   //是否显示分页(*)

        //sortable: false,   //是否启用排序

        sidePagination: "server"//分页方式:client客户端分页,server服务端分页(*)

        pageNumber: 1,   //初始化加载第一页,默认第一页

        pageSize: 5,   //每页的记录行数(*)

        pageList: [5, 10, 25, 50, 100], //可供选择的每页的行数(*)

        sortOrder: "asc",   //排序方式

        search: false,//搜索功能

        buttonsAlign: "left",//按钮对齐方式

        //showColumns: true,//列选择按钮

        strictSearch: true,

        clickToSelect: true,  //是否启用点击选中行

        //height: 460,   //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度

        uniqueId: "id",   //每一行的唯一标识,一般为主键列

        cardView: false,   //是否显示详细视图

        detailView: false,   //是否显示父子表

        queryParamsType: 'limit',

        queryParams: queryParams

    });

    //默认加载时携带参数

    function queryParams(params) {

        var params = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的

            pageNo : Math.ceil(params.offset/params.limit) + 1, //页码

            pageSize : params.limit, //页面大小

            "status" : $("#status").val()

        };

        return params;

    }

}

//点击“查询”按钮

$("#query").bind("click",function(){

  //两种方式:

  //1.直接刷新 $('#query_results').bootstrapTable("refresh", {}); 

  //2. 先销毁数据,再次查询,如下

    $("#query_results").bootstrapTable('destroy');

    loadPageData();

});

  

//表格列的格式化翻译,对应data-formatter="formatStatus"

function formatStatus(value, row, index){

  if(value == 'S1'){

    return "待处理";

  }else{

    return "已处理"

  }

}

以上就是Bootstrap分页表格插件使用教程的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

bootstrap如何去掉遮罩层

如何运用bootstrap进行页面布局

css中的bootstrap是指什么

bootstrap响应式布局图片怎么居中

bootstrap框架技术基础是什么

bootstrap做什么用的?

bootstrap-select下拉框如何清除选中的状态?

bootstrap如何设置响应式表格

vue如何引入bootstrap

当 position:sticky 遇到 bootstrap 浮动布局时候的踩坑记录

更多相关阅读请进入《bootstrap》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...