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 端处理前端传来的参数,并根据这些参数获取数据并返回给前端。