当前位置: > > > jQuery - 第三方表格插件DataTables使用详解2(Ajax请求数据、服务端分页)

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

四、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();
评论0