如何使用Bootstrap-Table實現分頁和排序？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

專注于為中小企業提供網站建設、網站制作服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業吉首免費做網站提供優質的服務。我們立足成都，凝聚了一批互聯網行業人才，有力地推動了上1000+企業的穩健成長，幫助中小企業通過網站建設實現規模擴充和轉變。

前幾天尋找了幾個表格插件之后，開始研究如何使用其中的某個插件來實現需求，需求如下：

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就可以滿足開始的需求，排序和分頁均由服務器端完成，數據不必在服務器端進行轉換，而是通過加載一個頁面片段來實現，可以更加方便的開發。效果如下：

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注創新互聯行業資訊頻道，感謝您對創新互聯的支持。