如何使用Bootstrap-Table实现分页和排序-创新互联

如何使用Bootstrap-Table实现分页和排序？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

前几天寻找了几个表格插件之后，开始研究如何使用其中的某个插件来实现需求，需求如下：

1.能够使用jquery.load直接加载一个片段过来，作为tbody的内容。

2.能够点击列头排序。

3.能够分页，而这种分页能够支持服务器端分页。

最后通过Bootstrap-Table这款插件实现，下面为大家介绍实现的具体过程：

1、引用插件

按官网的Getting started引用该插件所必须的css和js文件，如下：

<-- put your locale files after bootstrap-table.js -->

2、建立Table

在HTML页面中建立一个用于展示数据的Table，这个Table在随后的步骤中将被Bootstrap-Table初始化，如下：

    

    

        
名称
        
简称
        
地址
        
联系人
        
联系电话
        
操作
    
    
    


    

3、初始化Table

使用Javascript将Table初始化，并且自定义一些函数来满足之前的需求，代码如下：

$(document).ready(function(){
    initTable("dataTable");
});
//自定义ajax
function ajaxRequest(params){
    //访问服务器获取所需要的数据
    //比如使用$.ajax获得请求某个url获得数据
    $.ajax({
        type : 'post',
        url : '/list.do',
        data : parames.data,
        success  : function(e){
            if(e.code == 200){
                //表格加载数据
                parames.success({
                    total : total,//符合查询条件的数据总量
                    rows : [{}]//创建一个空行，此处要注意，如果去除，将不会显示任何行
                });
                //加载一个片段，形如..........
                $.ajax({
                    type     : 'post',
                    url      : '/body.do',
                    data : parames.data,
                    dataType : 'html',
                    success  : function(e){
                        $("#dataBody").html(e);
                    }
                });
            }
        }
    });
}
//自定义参数
function postQueryParams(params) {
    params.cname = $("#customerName").val();
    return params;
}
//初始化
function initTable(tableId){
    $("#" + tableId).bootstrapTable({
        classes : "table table-bordered table-hover table-striped",//加载的样式
        ajax : "ajaxRequest",//自定义ajax
        search : false,//不开启搜索文本框
        sidePagination : "server",//使用服务器端分页
        pagination : "true",//开启分页
        queryParams : "postQueryParams",//自定义参数
        pageSize : 8,//每页大小
        pageList : [8, 16, 32, 64]//可以选择每页大小
    });
}
//查询时，先销毁，然后再初始化
$("#btnSearch").click(function(){
    $("#dataTable").bootstrapTable('destroy');
    initTable("dataTable");
});

经过以上构建，dataTable就可以满足开始的需求，排序和分页均由服务器端完成，数据不必在服务器端进行转换，而是通过加载一个页面片段来实现，可以更加方便的开发。效果如下：

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。