DataTable 是一种服务器端数据分页的方法,它可以按搜索条件筛选数据。前端通过 AJAX 和服务端交互数据,每次分页或搜索,都是 AJAX 向服务器请求数据后展示。这种方式适合表数据量持续增长的情况。

首先,我们来看前端代码。和前端分页相比,这里只需要填写表头。下面的 JS 代码很长,并且相比官方原版增加了全选按钮。

在服务端 PHP 代码之前,我们先看看分页和搜索 AJAX 都传递了什么参数:

- 第一段:第一页

```javascript

$.ajax({

url: 'your_server_url',

type: 'POST',

data: {

page: 1,

start: 0,

limit: 10,

order: '',

search: ''

},

success: function (res) {

console.log(res);

}

});

```

- 第二段:第二页

```javascript

$.ajax({

url: 'your_server_url',

type: 'POST',

data: {

page: 2,

start: 10,

limit: 10,

order: '',

search: ''

},

success: function (res) {

console.log(res);

}

});

```

- 第三段:第三页

```javascript

$.ajax({

url: 'your_server_url',

type: 'POST',

data: {

page: 3,

start: 20,

limit: 10,

order: '',

search: ''

},

success: function (res) {

console.log(res);

}

});

```

在传递的参数中,`limit`、`order`、`page`、`start`、`search` 这些参数全部都是 DataTable 组件自动产生。码农完全不必去为分页、搜索、排序去敲 JavaScript 代码。

下面我们看看 PHP 端是怎么响应请求的。我的代码基于 Hyperf 框架,只是部分代码肯定不能直接用,最主要的是搞明白参数传递和使用以及数据格式的返回。以下是一个示例代码:

```php

namespace App\Controller;

use Hyperf\HttpServer\Annotation\AutoController;

use Hyperf\HttpServer\Annotation\RequestMapping;

use App\Service\DataTableService;

use Psr\ContainerContainerInterface;

use HyperfHttpServer\Contract\ResponseInterface;

use Hyperf\HttpServerRouter\Dispatcher;

/** @autocontroller */

class DataTableController extends AbstractController implements ContainerInterface{

/** @var \Hyperf\DbConnectionManager\DbConnectionManager */

protected $db;

/** @var DataTableService */

protected $service;

/** @var Response */

protected $response;

/** @var array */

protected $data = []; // 这里存放数据表格的数据和配置信息.....]>*/$this->container->get(DataTableService::class);*/$this->response = $this->response->withHeader('Content-Type', 'application/json');*/$request = $this->request;*/$queryParams = json_decode($request->getQueryString(), true);*/$page = isset($queryParams['page']) && is_numeric($queryParams['page']) && $queryParams['page'] > 0 && $queryParams['page'] <= $this->db->table('your_table')->count()? (int)$queryParams['page']:1;// 每页显示的数量*/$limit = isset($queryParams['limit']) && is_numeric($queryParams['limit']) && $queryParams['limit']>0 && $queryParams['limit']<=100? (int)$queryParams['limit']:10;// 每次请求的起始位置*/$start = ($page-1)*$limit;// order字段*/*/$orderBy = isset($queryParams['order']) && strtolower($queryParams['order']) === 'asc'? 'asc':'desc';// search字段*/*/$search = isset($queryParams['search'])? $queryParams['search']:'';*/$data = $this->service->getData($start, $limit, $orderBy, $search);// 将获取到的数据组装成数组并返回给前端*/return $this->response->write(json_encode($data));die();} catch (\Exception $e) {return $this->throwableHandler->handleException($e);} catch (\Throwable $e) {return $this->throwableHandler->handleException($e);} catch (Error $e){return $this->throwableHandler->handleException($e);} finally{if ($this->db != null) $this->db = null;}elseif ($this->service) $this->service = null;elseif ($this->response) $this->response = null;elseif ($this->data) $this->data = null;} // end of getDataAction()方法以上代码展示了如何在 PHP 端处理前端传来的参数,并根据这些参数获取数据并返回给前端。