datatables可以自动帮我们实现分页,但当数据量过万时,datatables显示数据会很慢,因为datatables每取出一条数据,就要创建 tr/td ,所以数据越多,速度就越慢(我5万条数据大概需要40秒)。

  datatables的服务端模式可以解决这个问题。客户端模式是一次性把数据加载到前台渲染,很耗时间,服务端模式,根据分页到后台提取相应的数据。

  使用服务端模式一般需要配置下面的一些参数,案例:

 


<!DOCTYPE html>
<html>
<head>
    <title>测试datatables服务端</title>
    <link rel="stylesheet" type="text/css" href="__ADMIN__/css/jquery.dataTables.css">
    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="__ADMIN__/js/jquery.js"></script>
    <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="__ADMIN__/js/jquery.dataTables.js"></script>
</head>
<body>
    <table id="table_id_example" class="display">
    <thead>
        <tr>
            <th>user_id</th>
            <th>username</th>
            <th>email</th>
        </tr>
    </thead>
    <tbody>
    <!-- 由datatables自动添加 tr、td -->
    </tbody>
</table>

<script>
$(document).ready(function() {
    $("#table_id_example").dataTable({
      "lengthMenu": [
          [4,8,10,15,20,-1],    // 具体的数量
          [4,8,10,15, 20,"全部"] // 文字描述
      ],
      "paging": true,    // 是否开启分页功能(默认开启)
      'info': true,      // 是否显示分页的统计信息(默认开启)
      "searching":true,  // 是否开启搜索功能(默认开启)
      "ordering": true,  // 是否开启排序功能(默认开启)
      "order":[ [0,'asc'] ], // 设置默认排序的表格列[参数1是表格列的下标,从0开始]
      "stateSave": true,      // 是否保存当前datatables的状态(刷新后当前保持状态)
      "processing": true,     // 显示处理中的字样[数量多的时候提示用户在处理中](默认开启)
      "serverSide": true,    // 是否开启服务器模式
                              // false时,会一次性查询所有的数据,dataTables帮我们完成分页等。
                              // true时,点击分页页码就会每次都到后台提取数据。
      "language": //把文字变为中文
          {  
            "sProcessing": "处理中...",  
            "sLengthMenu": "显示 _MENU_ 项结果",  
            "sZeroRecords": "没有匹配结果",  
            "sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",  
            "sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",  
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",  
            "sInfoPostFix": "",  
            "sSearch": "搜索:",  
            "sUrl": "",  
            "sEmptyTable": "表中数据为空",  
            "sLoadingRecords": "载入中...",  
            "sInfoThousands": ",",  
            "oPaginate": {  
                "sFirst": "首页",  
                "sPrevious": "上页",  
                "sNext": "下页",  
                "sLast": "末页"  
            },  
            "oAria": {  
                "sSortAscending": ": 以升序排列此列",  
                "sSortDescending": ": 以降序排列此列"  
            }  
          },
      // 使用ajax到后台服务获取数据
      "ajax": {               
      "url": "{:url('User/index')}", //请求数据的后台地址
      "type": "POST",     // ajax的请求方法
          
      },
      //需要接收返回的数据
      //总的数量与表格的列数必须一致,不能多也不能少,一个变量代表一个td
      //如果data接收服务器没有返回该字段信息,那么该字段一定要同时设置defaultContent属性
      //例{'data':'a',"defaultContent":""},
      "columns": [
        {"data": "user_id"},
        {"data": "username"},
        {"data": "email"},
      ]
    });
  });
</script>
</body>
</html>


 

   上面的设置好之后,给服务端发送ajax请求,我们可以在浏览器的控制台看到ajax请求的数据如下:

  

datatables 分页样式美化_datatables 分页样式美化

  我们可以在服务端接收这些数据,由于接收到的是一个多维数组,拆分数据的时候注意一下即可。以下是PHP中TP5框架处理服务端数据的案例:

 


if( request()->isAjax() ){
            $this->user = new UserModel;

            //接收所有传过来的post数据
            $datatables = request()->post();
            //得到排序的方式
            $order = $datatables['order'][0]['dir'];
            //得到排序字段的下标
            $order_column = $datatables['order'][0]['column'];
            //根据排序字段的下标得到排序字段
            $order_field = $datatables['columns'][$order_column]['data'];
            //得到limit参数
            $limit_start = $datatables['start'];
            $limit_length = $datatables['length'];
            //得到搜索的关键词
            $search = $datatables['search']['value'];

            //从数据库取出结果
            //如果有搜索行为,则按照关键词查询数据
            if ($search) {
                $data = $this->user
                        ->order("$order_field $order")
                        ->limit($limit_start,$limit_length)
                        ->where('user_id','LIKE',"%$search%")
                        ->select();
                $data_keyword = $this->user
                                ->where('user_id','LIKE',"%$search%")
                                ->select();
                $cnt = count($data_keyword);   //获取满足关键词的总记录数

            }else{
                //没有关键词,则查询全部
                $data = $this->user
                ->order("user_id $order")
                ->limit($limit_start,$limit_length)
                ->select();
                $cnt = $this->user->count(); // 数据总数
            }

            if($data) {
                $data = collection($data)->toArray();
            }            
            $info = [
               'draw'=> request()->post('draw'), // ajax请求次数,作为标识符
               'recordsTotal'=>count($data),  // 获取到的结果数(每页显示数量)
               'recordsFiltered'=>$cnt,       // 符合条件的总数据量
               'data'=>$data,          //获取到的数据结果
            ];
            //转为json返回
            return json( $info );


 

  如果不会TP5框架或者使用其他编程语言,这里有通用的思路。

  因为现在是后端模式,一些业务逻辑需要我们去处理:

  1.从ajax中接收到必要的数据,如果需要用到分页,需要查数据库的limit函数的开始、结束参数;要实现排序,则需要获取排序的字段、排序的方式;要加上搜索功能,就要获取到搜索的关键字。

  2.要做是否有搜索行为的判断,有搜索关键字就用到where语句将关键字查出,没有则直接查出返回结果即可。比较直白的逻辑:将这些数据整合到sql查询语句中,需要排序就用order,需要分页就加上limit,需要搜索就加where条件判断

  3.由于要返回符合条件的总数量,搜关键词跟查询所有数据获得的数据量肯定不同,所以要分来获取;搜关键词的时候要查询2次数据库,一次是查出带limit的结果,一次是查出带关键词的结果

  4.查关键词不会得到查哪个字段,只能自己通过程序判断出来,所以最好只查一个字段的关键词

  5.最后的返回数据是核心,‘draw’要原样返回,'data'是从数据库中获取到的数据,转为json格式返回给datatables。

  附:

  datatables简单使用