jQuery - 第三方表格插件DataTables使用详解2（Ajax请求数据、服务端分页）

2018-03-08 发布：hangge 阅读：5631

四、Ajax请求数据之：一次性全部获取

1，条目为数组的情况

（1）假设服务器上数据文件（data.txt）里的数据如下：

{
  "data": [
     [
         "001",
         "张三",
         "2011-11-23"
     ],
     [
         "002",
         "李四",
         "2001-11-23"
     ],
     [
         "003",
         "刘士元",
         "2021-08-21"
     ],
     [
         "004",
         "赵四",
         "2008-08-08"
     ],
     [
         "005",
         "赵五",
         "2008-08-08"
     ],
     [
         "006",
         "赵六",
         "2008-08-08"
     ],
     [
         "007",
         "赵七",
         "2008-08-08"
     ],
     [
         "008",
         "赵八",
         "2008-08-08"
     ],
     [
         "009",
         "赵九",
         "2008-08-08"
     ],
     [
         "010",
         "赵一零",
         "2008-08-08"
     ],
     [
         "011",
         "赵双一",
         "2008-08-08"
     ]
  ]
}

（2）我们只需要通过 ajax 配置项制定请求的地址即可。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/jquery-3.1.1.js"  type="text/javascript"></script>
    <script src="media/js/jquery.dataTables.js"  type="text/javascript"></script>
    <link rel="stylesheet" href="media/css/jquery.dataTables.css" type="text/css" />
    <script type="text/javascript">
      $(document).ready(function() {
        $('#myTable').DataTable({
          "ajax": 'data.txt'
        });
      });
    </script>
  </head>
  <body>
    <table id="myTable">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>出生日期</th>
            </tr>
        </thead>
    </table>
  </body>
</html>

（3）运行结果如下：

2，条目为对象的情况

（1）假设服务器上数据文件（data.txt）里的数据如下：

{
  "data": [
            {
               "id": "001",
               "name": "张三",
               "birthday": "2015-12-31"
            },
            {
               "id": "002",
               "name": "李四",
               "birthday": "2001-11-31"
            },
            {
               "id": "003",
               "name": "王五",
               "birthday": "2011-12-31"
            }
  ]
}

（2）页面代码如下。可以看到除了通过 ajax 配置项指定请求的地址，还要设置下每列绑定的属性。

$('#myTable').dataTable({
  "ajax": 'data.txt',
  columns: [
     { data: 'id'},
     { data: 'name'},
     { data: 'birthday'}
  ]
});

五、Ajax请求数据之：服务端分页

前面的样例中，分页都是在客户端这边做的。但如果数据量特别大（上万条），建议在后台做分页。也就是说前台每次只读取当前一页的数据。虽然这样做会增加代码复杂度，但可以让页面响应更快。

1，客户端代码

这次的 Ajax 我们使用对象来配置。这种方式更加灵活且功能更强大些。
服务端返回的数据条目同上面一样，可以是数组也可以是对象，这里我以对象为例。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/jquery-3.1.1.js"  type="text/javascript"></script>
    <script src="media/js/jquery.dataTables.js"  type="text/javascript"></script>
    <link rel="stylesheet" href="media/css/jquery.dataTables.css" type="text/css" />
    <script type="text/javascript">
      $(document).ready(function() {
        $('#myTable').DataTable({
          //表示翻页时是否显示 processing信息（正在加载中），这个信息可以修改
          "processing": true,
          // 服务器端处理方式
          "serverSide": true,
          "ajax": {
              // url可以直接指定远程的json文件
              url: "data.php",
              type: 'POST',
              // 传给服务器的数据，可以添加我们自己的查询参数
              data: function (param) {
                  param.toke = "hangge.com"
                  console.log("请求的参数：", param);
                  return param;
              },
          },
          "columns": [
             { data: 'id'},
             { data: 'name'},
             { data: 'birthday'}
          ]
        });
      });
    </script>
  </head>
  <body>
    <table id="myTable">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>出生日期</th>
            </tr>
        </thead>
    </table>
  </body>
</html>

2，服务端代码（data.php）

<?php
  /******************************
  下面是客户端发过来的数据
  *******************************/
 // draw：计数器，返回数据的时候用这个值设定
 // start:开始记录（0 besed index）
 // length:每页条数
 // search[value]：检索文字
 // order[i][column]：int 排序列的序号 例如：
 //      2，代表第3列排序 i代表有几个排序，一个的话服务器端这样写“order[0][column]”
 // order[i][dir]：排序的方式"desc","asc"
 // 下面comuns中的i取值从0~columns.length，所有的columns信息都发送到了服务器
 // columns[i][data]：columns上定义的data属性值
 // columns[i][name]：columns上定义的name属性值
 // columns[i][searchable]：列能不能检索
 // columns[i][orderable]：列能不能排序
 // columns[i][search][value]：列的检索值 string
 $draw = $_POST["draw"];  //计数器（传过来什么下面也要返回什么）
 $start = $_POST["start"];
 $length = $_POST["length"];
 $toke = $_POST["toke"];

 /******************************
 下面是获取列表数据
 *******************************/
  $recordsTotal = 56; //假设记录总是是56条
  $data = [];
  for($i=0; $i<$length &&  ($start+$i)<$recordsTotal; $i++){
    array_push($data, array('id' =>  $start + $i + 1, 'name' => '张三', 'birthday' => '2015-12-31'));
  }

  /******************************
  下面是服务器返回的数据
  *******************************/
  // draw：和Request的draw设定成一样的值
  // recordsTotal：所有的总件数
  // recordsFiltered：筛选后的总件数
  // data：返回的数据
  //   每一行数据上面，可以包含这几个可选项
  //   DT_RowId：加在行上的ID值
  //   DT_RowClass：加在行上的Class
  //   DT_RowData：加在行上的额外数据（object）
  //   DT_RowAttr：加在行上的属性（object）
  // error:如果有错误，就设定这个值，没有错误，不要包含这个值
  $resut = array('draw' => $draw,
                'recordsTotal' => $recordsTotal,
                'recordsFiltered' => $recordsTotal,
                'data' => $data);
  echo json_encode($resut, JSON_PRETTY_PRINT);
?>

3，效果图

（1）运行效果如下：

（2）同时通过请求抓取可以发现：不管是进行翻页操作、或是改变每页条目数、或是输入搜索内容、或是点击列头排序，表格都会发起请求并刷新数据。

（3）而服务端返回的数据如下：

附一：对返回的数据进行处理

1，基本介绍

有时从服务器上获取到的数据可能无法直接用于表格显示，需要先做些转换处理。这个只需通过 ajax.dataSrc 配置属性即可实现。

2，使用样例

（1）这里我们将返回结果中，所有的姓名前都加个“@”符号。

（2）代码如下：

$('#myTable').DataTable({
  //表示翻页时是否显示 processing信息（正在加载中），这个信息可以修改
  "processing": true,
  // 服务器端处理方式
  "serverSide": true,
  "ajax": {
      // url可以直接指定远程的json文件
      url: "data.php",
      type: 'POST',
      "dataSrc": function(json) {
        for(var i=0, length=json.data.length ; i<length ; i++) {
          json.data[i]["name"] = "@" + json.data[i]["name"];
        }
        return json.data;
      }
  },
  "columns": [
     { data: 'id'},
     { data: 'name'},
     { data: 'birthday'}
  ]
});

附二：刷新数据（重新加载数据）

1，不改变原来的 url

注意：第二个参数设为 false 的话，会保持当前的选中页。

var table = $('#myTable').DataTable();
table.ajax.reload(function(json) {
    console.log(json);
}, true);

2，改变 url

var table = $('#myTable').DataTable();
table.ajax.url('newData.txt').load();

附三：禁止表格初始化时就去自动请求数据

1，问题描述

默认情况下，如果我们配置了 ajax 地址，当表格初始化后它便会自动发起 ajax 请求去获取数据。但有的时候我们并不希望它一开始就自动请求数据，而是手动控制它去请求（比如点击一个按钮后再发起请求）。

2，解决办法

（1）首先通过 iDeferLoading 和 serverSide 这两个属性设置，让表格不会自动发起请求。

$('#myTable').DataTable({
  "ajax": 'data.txt',
  "iDeferLoading": 0,  
  "serverSide": true, 
});

（2）后面如果想请求数据时，调用 draw() 方法即可。

$('#myTable').DataTable().draw();

（3）除了 draw() 方法，使用前面介绍的刷新数据方法也是可以的。

//不改变原来的 url
var table = $('#myTable').DataTable();
table.ajax.reload(function(json) {
    console.log(json);
}, true);

//改变 url
var table = $('#myTable').DataTable();
table.ajax.url('newData.txt').load();