Heim > Web-Frontend > Bootstrap-Tutorial > Verwenden Sie Bootstrap-Table, um Paging und Sortierung zu implementieren

Verwenden Sie Bootstrap-Table, um Paging und Sortierung zu implementieren

angryTom
Freigeben: 2020-05-15 09:18:17
Original
4141 Leute haben es durchsucht

Verwenden Sie Bootstrap-Table, um Paging und Sortierung zu implementieren

Nachdem ich vor ein paar Tagen nach mehreren Tabellen-Plug-Ins gesucht hatte, begann ich zu studieren, wie man eines der Plug-Ins verwendet, um die Anforderungen zu erfüllen:

1. Mit jquery .load können Sie ein Fragment direkt als Inhalt von tbody laden.

2. Sie können zum Sortieren auf die Spaltenüberschrift klicken.

3. Möglichkeit zur Paginierung, und diese Paginierung kann serverseitiges Paging unterstützen.

Schließlich wurde es über das Bootstrap-Table-Plug-in implementiert. Im Folgenden finden Sie eine Einführung in den spezifischen Prozess der Implementierung:

1

Laut der offiziellen Website bezieht sich „Erste Schritte“ auf die für das Plug-in erforderlichen CSS- und JS-Dateien wie folgt:

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
Nach dem Login kopieren
<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>
Nach dem Login kopieren

2. Erstellen Sie eine Tabelle

Erstellen Sie eine Tabelle zum Anzeigen von Daten auf der HTML-Seite. Diese Tabelle wird in den folgenden Schritten von Bootstrap-Table wie folgt initialisiert:

<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>
Nach dem Login kopieren

3. Tabelle initialisieren

Verwenden Sie Javascript, um die Tabelle zu initialisieren und einige Funktionen anzupassen, um die vorherigen Anforderungen zu erfüllen. Der Code lautet wie folgt:

$(document).ready(function(){
    initTable("dataTable");
});
//自定义ajax
function ajaxRequest(params){
    //访问服务器获取所需要的数据
    //比如使用$.ajax获得请求某个url获得数据
    $.ajax({
        type : &#39;post&#39;,
        url : &#39;/list.do&#39;,
        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");
});
Nach dem Login kopieren

Nach der obigen Konstruktion kann die Datentabelle die anfänglichen Anforderungen erfüllen Durch die Serverseite abgeschlossen, müssen die Daten nicht auf der Serverseite konvertiert werden, sondern werden als Seitenfragment implementiert und können bequemer entwickelt werden. Der Effekt ist wie folgt:

Verwenden Sie Bootstrap-Table, um Paging und Sortierung zu implementieren

Empfohlenes Tutorial:

Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonVerwenden Sie Bootstrap-Table, um Paging und Sortierung zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage