Bootstrap-Table中怎么實現(xiàn)分頁和排序

這篇文章給大家介紹Bootstrap-Table中怎么實現(xiàn)分頁和排序，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

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頁面中建立一個用于展示數(shù)據(jù)的Table，這個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");});//自定義ajaxfunction ajaxRequest(params){    //訪問服務器獲取所需要的數(shù)據(jù)    //比如使用$.ajax獲得請求某個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)建一個空行，此處要注意，如果去除，將不會顯示任何行                });                //加載一個片段，形如<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",//使用服務器端分頁        pagination : "true",//開啟分頁        queryParams : "postQueryParams",//自定義參數(shù)        pageSize : 8,//每頁大小        pageList : [8, 16, 32, 64]//可以選擇每頁大小    });}//查詢時，先銷毀，然后再初始化$("#btnSearch").click(function(){    $("#dataTable").bootstrapTable('destroy');    initTable("dataTable");});

關于Bootstrap-Table中怎么實現(xiàn)分頁和排序就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。