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

專注于為中小企業(yè)提供網(wǎng)站建設(shè)、網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)吉首免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

前幾天尋找了幾個(gè)表格插件之后，開始研究如何使用其中的某個(gè)插件來實(shí)現(xiàn)需求，需求如下：

1.能夠使用jquery.load直接加載一個(gè)片段過來，作為tbody的內(nèi)容。

2.能夠點(diǎn)擊列頭排序。

3.能夠分頁，而這種分頁能夠支持服務(wù)器端分頁。

最后通過Bootstrap-Table這款插件實(shí)現(xiàn)，下面為大家介紹實(shí)現(xiàn)的具體過程：

1、引用插件

按官網(wǎng)的Getting started引用該插件所必須的css和js文件，如下：

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<-- put your locale files after bootstrap-table.js -->
<script src="bootstrap-table-zh-CN.js"></script>

2、建立Table

在HTML頁面中建立一個(gè)用于展示數(shù)據(jù)的Table，這個(gè)Table在隨后的步驟中將被Bootstrap-Table初始化，如下：

<table id="dataTable">
    <thead>
    <tr>
        <th data-field="fullname" data-sortable="true">名稱</th>
        <th data-field="shortname" data-sortable="true">簡稱</th>
        <th data-field="address" data-sortable="true">地址</th>
        <th data-field="linkman" data-sortable="true">聯(lián)系人</th>
        <th data-field="tel" data-sortable="true">聯(lián)系電話</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="dataBody">

    </tbody>
</table>

3、初始化Table

使用Javascript將Table初始化，并且自定義一些函數(shù)來滿足之前的需求，代碼如下：

$(document).ready(function(){
    initTable("dataTable");
});
//自定義ajax
function ajaxRequest(params){
    //訪問服務(wù)器獲取所需要的數(shù)據(jù)
    //比如使用$.ajax獲得請求某個(gè)url獲得數(shù)據(jù)
    $.ajax({
        type : 'post',
        url : '/list.do',
        data : parames.data,
        success  : function(e){
            if(e.code == 200){
                //表格加載數(shù)據(jù)
                parames.success({
                    total : total,//符合查詢條件的數(shù)據(jù)總量
                    rows : [{}]//創(chuàng)建一個(gè)空行，此處要注意，如果去除，將不會(huì)顯示任何行
                });
                //加載一個(gè)片段，形如<tr><td>..</td>...</tr><tr><td>..</td>...</tr>
                $.ajax({
                    type     : 'post',
                    url      : '/body.do',
                    data : parames.data,
                    dataType : 'html',
                    success  : function(e){
                        $("#dataBody").html(e);
                    }
                });
            }
        }
    });
}
//自定義參數(shù)
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",//使用服務(wù)器端分頁
        pagination : "true",//開啟分頁
        queryParams : "postQueryParams",//自定義參數(shù)
        pageSize : 8,//每頁大小
        pageList : [8, 16, 32, 64]//可以選擇每頁大小
    });
}
//查詢時(shí)，先銷毀，然后再初始化
$("#btnSearch").click(function(){
    $("#dataTable").bootstrapTable('destroy');
    initTable("dataTable");
});

經(jīng)過以上構(gòu)建，dataTable就可以滿足開始的需求，排序和分頁均由服務(wù)器端完成，數(shù)據(jù)不必在服務(wù)器端進(jìn)行轉(zhuǎn)換，而是通過加載一個(gè)頁面片段來實(shí)現(xiàn)，可以更加方便的開發(fā)。效果如下：

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

本文名稱：如何使用Bootstrap-Table實(shí)現(xiàn)分頁和排序
標(biāo)題網(wǎng)址：http://chinadenli.net/article48/ipjcep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、做網(wǎng)站、全網(wǎng)營銷推廣、網(wǎng)站內(nèi)鏈、搜索引擎優(yōu)化、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)