dataTables 使用ajax 和服务器处理获取数据

Alone88

发布于 2019-10-22 17:27:58

5K0

发布于 2019-10-22 17:27:58

文章被收录于专栏：Alone88Alone88

datatables

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。官网：https://datatables.net/ 中文网：https://datatables.club/

使用datatables

使用这个很简单,只需要引入两个静态文件

<script src="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"></script>
<link href="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js">

然后初始化：
$(document).ready( function () {
    $('#myTable').DataTable();
} );

ajax 获取数据

记录一下通过ajax 获取数据实现表格

通过ajax 可以通过对象数据 和数组数据 来着实现

通过对象数据

你的对象数据格式应该是这样的，对象数据格式就是json格式的

默认获取的是data下面的数据，可以在请求的时候设置dataSrc自定义数据属性名

{
  "data":[
   {
            "name": "Tiger Nixon",
            "position": "System Architect",
            "salary": "$320,800",
            "start_date": "2011\/04\/25",
            "office": "Edinburgh",
            "extn": "5421"
        },
        {
            "name": "Garrett Winters",
            "position": "Accountant",
            "salary": "$170,750",
            "start_date": "2011\/07\/25",
            "office": "Tokyo",
            "extn": "8422"
        },
      ...
]
}

然后初始化

$(document).ready( function () {
    $('#myTable').DataTable({
     ajax:'url',//对象数据地址,
     columns：[
     {"data":"name"},
     {"data":"position"},
     {"data":"salary"},
     {"data":"start_date"},
     {"data":"office"},
     {"data":"extn"},
]
});
} );

通过数组数据

格式和对象数据差不多的,data 可以通过dataSrc定义的

{
    "data": [
        [
            "Tiger Nixon",
            "System Architect",
            "Edinburgh",
            "5421",
            "2011\/04\/25",
            "$320,800"
        ],
        [
            "Garrett Winters",
            "Accountant",
            "Tokyo",
            "8422",
            "2011\/07\/25",
            "$170,750"
        ],
...
}

然后初始化

$(document).ready( function () {
    $('#myTable').DataTable({
     ajax:'url',//数组数据地址,
});
} );

通过服务器处理的数据

服务器获取数据要开启serverSid: true

$('#mtTable').DataTable({
   "serverSide": true,
    "ajax": "url"
})

从服务器返回的数据格式

{
"draw":int  //Datatables发送的draw是多少那么服务器就返回多少。
"recordsTotal":int //即没有过滤的记录数
"recordsFiltered":int  //过滤后的记录数
"data":array // 要返回的实际数据 这里和 上面的json一样
"error":string //服务器出问题的提示
}

处理数据

    $('#myTable').DataTable({
     serverSid:true
     ajax:'url',//对象数据地址,
     columns：[
     {"data":"name"},
     {"data":"position"},
     {"data":"salary"},
     {"data":"start_date"},
     {"data":"office"},
     {"data":"extn"},
]
});

本文由 Alone88 创作，采用知识共享署名4.0 国际许可协议进行许可本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名最后编辑时间为: May 27, 2019 at 07:08 pm

本文参与?腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

ajax