bootstrap-table 的一些常用方法, 服务端分页,排序,样式等

bootstrap-table 是基于jquery, bootstrap 的一个 前端table 框架。最近测试了下基本用法,感觉很不错,而且官方的文档以及例子都比较全面,如果是详细的用法,可以参考官方文档,我这里只记录下,我自己常用的一点东西。



1. bootstrap-table  服务端分页问题 。
我是在 table 的 属性里面直接配置分页的参数的,当然也可以通过js 配置。
程序代码 程序代码

<table id="listTable" data-click-to-select="true"
                    data-toggle="table"
                    data-side-pagination="server"
                    data-pagination="true"
                    data-page-list="[10,20,50,100]"
                    data-pagination="true"
                    data-page-size="10"
                    data-pagination-first-text="首页"
                    data-pagination-pre-text="上一页"
                    data-pagination-next-text="下一页"
                    data-pagination-last-text="末页"
                    data-query-params="paginationParam"
                    data-method="get"
                    data-response-handler="responseHandler"
                    data-row-style="rowStyle"
                    data-url="${ctx}/user">                    
                    <thead>
                        <tr>
                            <th data-field="checkid" data-checkbox="true"></th>
                            <th data-field="username" data-sortable="true">用户名</th>
                            <th data-field="status">状态</th>
                            <th data-field="description">描述</th>
                        </tr>
                    </thead>          
                </table>


其中需要注意的是,  data-side-pagination="server" 表示服务端分页,同时下面有分页的参数配置,看属性就明白意思了,另外 data-url 就是请求服务端的地址。

在这里我想注意的是两点

1. 关于分页时发送的参数问题,bootsrap 默认发送的参数,显然不能满足我们的实际需求,因为有各种查询条件,即使你配置了bootstrap-table 的查询也不能满足,反而我觉得是鸡肋。 这个时候,就需要 配置 data-query-params="paginationParam" 来定义分页时需要的参数了。这里是一个js 方法
程序代码 程序代码

function paginationParam(params) {
    return {
        userName: encodeURI($.trim($("#username").val())),
        pageSize: params.limit,
        offset: params.offset,
        pageNumber: $('#listTable').bootstrapTable('getOptions').pageNumber
    };
}


上面的userName 参数就是自己增加的,当然你 可以增加其他你想要的参数,这些参数会被发送到你配置处理分页的后台上,想怎么处理就怎么处理。

2. 分页后的返回值, 是有格式要求的,必须满足如下格式:
程序代码 程序代码

{
            "total": 500,
            "rows": [{},{}.....]
        }
[code]

如果不是这种格式,必须自己进行转换,这个时候,data-response-handler="responseHandler" 配置就起作用了。这个js 方法就是将你从服务端收到的数据,转换为bootstrap-table 能接受的格式,当然如果你本身就是这种格式,那就不需要配置这个了。
[code]
function responseHandler(sourceData) {    
    if (sourceData.meta.code == "200") {
        var pageData = sourceData.data.data;
        for (var i=0; i<pageData.length; i++) {
            if (pageData[i].status == "0") {
                pageData[i].status = "无效";
            } else {
                pageData[i].status = "有效";
            }            
        }
        return {
            "total": sourceData.pagination.totalCount,
            "rows": pageData
        }
    } else {
        return {
            "total": 0,
            "rows": []
        }
    }
}

这是我自己测试封装的。

另外,如果你想让bootstrap-table 隔行换颜色显示,还可以配置样式方法:  data-row-style="rowStyle"
程序代码 程序代码

function rowStyle(row, index) {
    if (index % 2 === 0) {
        return {
            classes: 'active'
        };
    }
    return {};
}


里面配置你的样式就好了。

这样bootstrap-table 服务端分页就处理好了,感觉还是很不错的。

除非申明,文章均为一号门原创,转载请注明本文地址,谢谢!
[本日志由 yihaomen 于 2016-01-26 02:41 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: bootstrap-table
相关日志:
评论: 4 | 引用: 0 | 查看次数: -
回复回复666[2017-04-20 05:23 PM | del]
11111
回复回复yanyan[2017-03-08 12:56 AM | del]
data-pagination-last-text 在bootstrap table里没有
回复回复summer[2016-06-30 11:29 AM | del]
可以得到 pageNumber 的,仔细检查下。
回复回复BelloJun[2016-04-29 10:53 AM | del]
引用内容 引用内容
pageNumber: $('#listTable').bootstrapTable('getOptions').pageNumber

这句能得到值吗?为什么我的是undefined?
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.