DataTables的详细配置使用--结合ThinkPHP5.0框架

---

title: DataTables的配置使用--结合ThinkPHP5.0框架
tags: [DataTables,分页,搜索,排序]

---

众所周知，DataTables插件融合了分页、搜索、排序的功能，使用也相对简单，下面将结合TP5框架介绍DataTables的使用配置。

原文博客：煜儿博客

一. DataTables介绍

DataTables分为两种模式：1.基于客户端　　2.基于服务端
这两种模式有什么不同呢？

基于客户端
　　优点：每次都没有请求产生，速度快
　　缺点：数据量大的时候其渲染表格每一行很慢

基于服务端
　　优点：数据量大的时候，每次请求服务器，动态生成，按需所查
　　缺点：基于服务端，每次操作都需要请求服务器

至于选择使用哪种模式，请自行选择，下面将介绍这两种模式的使用。

---

二. 基于客户端的配置使用

首先，配置DataTables插件必须要参考官网文档：
DataTables中文网　　DataTables英文网
其次，最好是将相关文件包下载到本地框架中（文件包自行下载）
下面贴出代码：
不管是哪种模式，首先都要引入相关文件，这里的html名为 index.html：

引入之后，在html中接着写代码：

      {foreach $data as $v}
         
       {/foreach}
    

    

        

            
序号
            
姓名
            
详细信息
        
    
    

              
{$v.id}
              
{$v.name}
              
点击查看
         

后台控制器：

public function index(){
        $data = \app\home\model\User::select();
        $this ->assign('data',$data);
        return view();
}

说明：本例假设查询所有的用户数据，index.html是由index方法渲染而来，User是模型。
其实，这个思路跟最基本的TP5查询数据是一样的，将查询出来的总数据($data)分配到index.html中，然后遍历数据即可，数据的具体处理由DataTables插件自己处理。

---

三. 基于服务端的配置使用

同样，继续使用上述案例背景。
index.html中代码：

    

          

              
序号
              
姓名
              
详细信息
          
    
    

    

后台控制器代码：

public function index(){
    return view();  
}

public function getData(){
    if(request()->isAjax()){
            //实例化User模型，注意要在上面use
            $UserModel = new User;
            //接受请求
            $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 = $UserModel
                        ->order("$order_field $order")
                        ->limit($limit_start,$limit_length)
                        ->where('username','LIKE',"%$search%")
                        ->select();
                $keyword_all_data = $UserModel
                                ->where('username','LIKE',"%$search%")
                                ->select();
                $total = count($keyword_all_data);   //获取满足关键词的总记录数
            }else{
                
                //没有关键词，则查询全部
                $data = $UserModel
                ->where('is_del',0)   //查询未被标记为删除的数据，可选
                ->field('id,username,age')
                ->order("username $order")
                ->limit($limit_start,$limit_length)
                ->select();
                $total = $UserModel->count(); // 数据总数
            }
           
            if($data){
                $data = collection($data)->toArray();
            }        
            $draw = request()->post('draw');
            $AllData = [
                // ajax的请求次数，创建唯一标识
                'draw' => $draw,
                // 结果数
                'recordsTotal' => count($data),
                // 总数据量
                'recordsFiltered' => $total,
                // 总数据
                'data' => $data,
            ];
            return json($AllData);
    }else{
            //如果不是ajax请求，自行处理
    }
}

说明：此例：分为两个大步骤：
1.index方法展示index.html页面；
2.页面加载完成自动发起ajax请求getData，获取数据；

getData方法中的逻辑：首先判断是否为ajax请求，其次判断是否有搜索行为，最终将结果返回到index.html中。

在index.html中，动态生成了【点击查看】的按钮，当点击时会触发相应的show_userinfo函数，函数自行书写。

【注意】index.html中中不可书写内容，里面的为DataTables自动生成

---

至此，DataTables插件的使用已经基本完成，如需其他配置，请参考官网文档。

参考：DataTables官网