关于后台管理前端列表插件的选择和使用。

做后台管理系统一般不怎么讲究样式。都是以功能为主。而最多的应该是数据列表了。如果纯粹自己写，需要考虑因素太多，例如分页，搜索，排序,功能扩展,样式统一等,还容易出现问题，不符合快速开发的理念。采用Jquery的插件,使用AJAX的交互方式。进行列表页面的快速渲染。而关于选择又有多样化，而经过考虑我是选择datatables。

以下是实际效果图

前期准备。进去Datables的官网

下载我们需要的插件。官网还有文档，虽然有些地方是坑点，但大致上还是没错的。

解压缩包后放入项目。此次主要引用文件为。

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);
        }
    };

这些是基本的功能。注释上都有标明，根据自己的需求去调整。如果需要更多功能。

以下是你需要的。

Datables手册