做後臺管理系統一般不怎麼講究樣式。都是以功能為主。而最多的應該是資料列表了。如果純粹自己寫，需要考慮因素太多，例如分頁，搜尋，排序,功能擴充套件,樣式統一等,還容易出現問題，不符合快速開發的理念。採用Jquery的外掛,使用AJAX的互動方式。進行列表頁面的快速渲染。而關於選擇又有多樣化，而經過考慮我是選擇datatables。

以下是實際效果圖

下載我們需要的外掛。官網還有文件，雖然有些地方是坑點，但大致上還是沒錯的。

解壓縮包後放入專案。此次主要引用檔案為。

jquery.js
jquery.dataTables.min.js

引入後。開始後端的程式碼

我這裡使用的是PHP

  //多維陣列一般是資料查詢後生成的。大致上是總條數/分頁數=單頁資料
        $info=[
            0=>
            ['id'=>1,'name'=>'test1', ],
            ['id'=>2,'name'=>'test2', ]
        ];
        //總條數,資料查詢後統計一下總共多少條。
        $count=2;
        $info=array('data'=>$info,'recordsTotal'=>$count,'recordsFiltered'=>$count);
        echo json_encode($info);
 

最終返回的是JSON格式。例如下圖

而前端要做的是。

首先是HTML的,需要一個存放表格。

       <table class="table table-border table-bordered table-bg table-hover">
                <thead>
                <tr>
                    <th scope="col" colspan="14">產品列表</th>
                </tr>
                <tr class="text-c">
                    <th >序號</th>
                   <th>名稱</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
 

然後是JS的程式碼。

 window.onload = function () {
        $('.table').dataTable({
            lengthChange: false,
            searching: false,//本地搜尋
            serverSide: true,//伺服器模式
            ordering: false,//是否排序
            stateSave: true,//儲存查詢狀態
            pageLength: "10",//預設10條
            order: [[11,'desc']],//排序設定
            aoColumnDefs: [
                {"orderable": false, "aTargets": [0,1]}// 不參與排序的列
            ],
            "ajax": {
                "url": "請求地址",
                "contentType": "application/json",
                "data": function (d) {
                    //提交額外的ajax 搜尋
                    return $.extend({}, d, {
                        '_csrf': "csrf",
                        "productCode": $('#productCode').val(),
                        "title": $('#title').val(),
                        "source": $('#source').val(),
                        "datemin": $('#datemin').val(),
                        "datemax": $('#datemax').val()
                    });
                },
                "dataSrc": function (json) {
                    //json二次處理層
                    $("#list_nums").html(json.recordsTotal);
                    var data = [];
                    return data;
                }
            },
            "columns": [
                /*列對應json返回鍵名*/
                {"data": "id"},
                {"data": "name"}
            ],
            "infoCallback": function (settings, json) {
                /*居中列*/
                $('table tr').find('td:eq(0)').css('text-align', 'center');
                $('table tr').find('td:eq(1)').css('text-align', 'center');
            }
        });
    };
    var list_cat = {
        doSearch: function () {
            //無過載式重新整理
            var table = $('.table').DataTable();
            table.draw(false);
        }
    };

這些是基本的功能。註釋上都有標明，根據自己的需求去調整。如果需要更多功能。

以下是你需要的。