最简单的datatables.js学习

HTML中只需要这个表格就可以展示后台提供的数据。最终呈现：

利用的前端datatables这个表格插件。
首先，引入必要的JS与CSS。

<link rel="stylesheet" href="../bootstrap.min.css">
<link rel="stylesheet" href="../jquery.dataTables.min.css">
<!--js部分添加在body结束部分更快加载页面-->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>

HTML主体部分就用上面那个就好了，重要的是table的id。
接下来就是JS部分。
datatables的初始化：

$("#data_table").DataTable({...});

后台数据是用ajax获取json格式的数据。

ajax: function (data, callback) {
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    processing: true,
                    serverSide: true,
                    url: "data.json",
                    success: function (result) {
                        var returndata = {};
                        returndata.draw = result.draw;
                        returndata.total = result.total;
                        returndata.data = result.data;
                        callback(returndata);
                    }
                })
            },

表格中字段对应获取方法：

columns: [{data: "name"}, {data: "starf_id"}, {data: "depart"}, {data: "date"},],

这两段都写在初始化语句的大括号里就好了。
这边的data就是你从json获取到的数据了。
data.json如下：

{
  "draw": 1,
  "total": 20,
  "data": [
    {
      "name": "elice",
      "starf_id": "517",
      "depart": "xian",
      "date": "2020/09/01"
    },
    {
      "name": "andy",
      "starf_id": "208",
      "depart": "rutong",
      "date": "2018/07/01"
    }
  ]
}

项目后台是用的springboot搭建的，这个data.json先用的文件数据，后期可以在后台传递json到ajax请求URL处理。
datatables还有其他的细节，暂时没用到就不写了。功能有时间后面一点一点添加。