Thinkphp5 与 dataTabls 的结合使用

dataTables的最基础使用

见有道云笔记 php与分页栏目。

Tp5 与 dataTables 简单的使用

控制器中就简单的使用类似all( )方法查询出数据，然后把数据传到视图中；视图中在合适的位置进行输出即可。（这样会一次查询出所有数据，传给dataTables来为我们实现分页，数据量大的时候，性能不是很好，不过很省事）。总得来说就是分页我们不用管了，想改变分页数量的时候配置个参数就好了。

Tp5 与 dataTables 高端的使用

异步查询数据，点击分页就到服务器查询那页的几条数据回来。

控制器

public function product_list()
    {
        if(request()->isAjax()) {
            $goodsModel = new GoodsModel();

            //接受请求
            $datatables = input();
            //得到排序的方式
            $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'];

            //查询出所有用户数据
            $data = $goodsModel
                ->field('id,goodsname,desc,status')
                ->order("id $order")
                ->limit($limit_start,$limit_length)
                ->select();
            $total = $goodsModel->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 {
            return $this->view->fetch();
        }
    }

视图

html部分
<table class="table table-border table-bordered table-bg table-hover table-sort">
				<thead>
					<tr class="text-c">
						<th width="40"><input name="" type="checkbox" value=""></th>
						<th width="40">ID</th>
						<th width="60">缩略图</th>
						<th width="100">产品名称</th>
						<th>描述</th>
						<th width="100">单价</th>
						<th width="60">发布状态</th>
						<th width="100">操作</th>
					</tr>
				</thead>
				<tbody>

				</tbody>
			</table>

js部分
$('.table-sort').dataTable({
	/*"aaSorting": [[ 1, "desc" ]],//默认第几个排序
	"bStateSave": true,//状态保存
	"aoColumnDefs": [
	  {"orderable":false,"aTargets":[0,7]}// 制定列不参与排序
	]*/

   //创建行回调，row表示的是tr元素，data表示的是td里面的内容，index表示行索引
	"createdRow":function(row,data,index){
		$(row).addClass('text-c va-m');
		$('td',row).eq(3).addClass('text-l');
		$('td',row).eq(3).html("<a style=\"text-decoration:none\" onClick=\"product_show('哥本哈根橡木地板','product-show.html','10001')\" href=\"javascript:;\"><img title=\"国内品牌\" src=\"__STATIC__/admin/static/h-ui.admin/images/cn.gif\">"+data.goodsname);
	},

	"lengthMenu": [  //就是左上角的显示多少条的那个东西
		[4,8,10,15,20], // 具体的数量
		[4,8,10,15,20]  // 文字描述
	],
	"paging": true,    // 是否开启分页功能(默认开启)
	'info': true,      // 是否显示分页的统计信息(默认开启)
	"searching":true,  // 是否开启搜索功能(默认开启)
	"ordering": true,  // 是否开启排序功能(默认开启)
	"order":[ [1,'asc'] ], // 设置默认排序的表格列[参数1是表格列的下标，从0开始]
	"stateSave": true,      // 是否保存当前datatables的状态(刷新后当前保持状态)
	"processing": true,     // 显示处理中的字样[数量多的时候提示用户在处理中](默认开启)
	"serverSide": true,     // 是否开启服务器模式
							// false时，会一次性查询所有的数据，dataTables帮我们完成分页等。
							// true时，点击分页页码就会每次都到后台提取数据。
	// 使用ajax到后台服务获取数据
	"ajax": {
		"url": "{:url('product_list')}", //请求数据的后台地址
		"type": "POST",     // ajax的请求方法

	},
	//需要接收返回的数据
	//总的数量与表格的列数必须一致，不能多也不能少，一个变量代表一个td
	//如果data接收服务器没有返回该字段信息，那么该字段一定要同时设置defaultContent属性
	//例{'data':'a',"defaultContent":""},
	"columns": [
		{'data':'a',"defaultContent":""},
		{"data": "id"},
		{'data':'b',"defaultContent":""},
		{"data": "goodsname"},
		{"data": "desc"},
		{'data':'c',"defaultContent":""},
		{"data": "status"},
		{'data':'d',"defaultContent":""},
		//这个写法保留，以后可能用上
		/*{"data": function(data){
				return '<button class="btn btn-info btn-sm"  onclick="show_userinfo('+ data.id +')" data-id=' + data + '><i class="fa fa-pencil"></i>查看答案</button>';
			} },*/
	],

});			

参考文章

https://www.jianshu.com/p/5490e60c9286