Bootstrap-Table を使用してページングと並べ替えを実装する

数日前にいくつかのテーブル プラグインを探した後、プラグインの 1 つを使用して要件を達成する方法を検討し始めました。要件は次のとおりです:

1. jqueryが使えるようになる .loadはtbodyの内容としてフラグメントを直接ロードします。

2. 列ヘッダーをクリックして並べ替えることができます。

3. ページネーション機能。このページングは​​サーバー側のページングをサポートできます。

最終的に Bootstrap-Table プラグインによって実装されました。以下は具体的な実装プロセスの概要です:

1. プラグインの引用

公式 Web サイトによると、「はじめに」とは、プラグインに必要な 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. テーブルの作成

HTML ページにデータを表示するためのテーブルを作成します。このテーブルは、次のように後続のステップで 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">联系人</th>
        <th data-field="tel" data-sortable="true">联系电话</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="dataBody">

    </tbody>
</table>

3. テーブルの初期化

JavaScript を使用してテーブルを初期化し、以前のニーズを満たすためにいくつかの関数をカスタマイズします。コードは次のとおりです:

$(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 : [{}]//创建一个空行，此处要注意，如果去除，将不会显示任何行
                });
                //加载一个片段，形如<tr><td>..</td>...</tr><tr><td>..</td>...</tr>
                $.ajax({
                    type     : &#39;post&#39;,
                    url      : &#39;/body.do&#39;,
                    data : parames.data,
                    dataType : &#39;html&#39;,
                    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(&#39;destroy&#39;);
    initTable("dataTable");
});

上記の構築後、dataTable は初期のニーズを満たすことができます。ソートとページングは​​、サーバー側 データはサーバー側で変換する必要がなく、ページフラグメントを介して実装されるため、より便利に開発できます。効果は次のとおりです:

推奨チュートリアル: ブートストラップ チュートリアル

以上がBootstrap-Table を使用してページングと並べ替えを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。