Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。
分页，即时搜索和排序
几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
各式各样的扩展: Editor, TableTools, FixedColumns ……
丰富多样的option和强大的API
支持国际化
超过2900+个单元测试
免费开源 （ MIT license ）！ 商业支持
更多特性请到官网查看
英文官网地址
中文官网地址
点击导航栏 ->手册->安装 安装教程地址
下面给大家演示（这里我是下载到本地了，当然你也可以用云资源）
第一步(新建index.html并引入CSS、JS)
//引入CSS
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="/admin/datatables/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="/admin/js/jquery.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="/admin/datatables/jquery.dataTables.js"></script>第二步
<table id="table_id_example">
<thead>
<tr>
<th>ID</th>
<th>文章标题</th>
<th>加入时间</th>
<th>操作</th>
</tr>
</thead>
</table>第三步
<script>
var dataTable = $('#table_id_example').DataTable();//此处的**table_id_example**对应**第二步**的id="table_id_example"
</script>来吧，展示。
下面我们来优化一下这个表格，分页方式有两种：
第一种客户端分页 （好处：服务器写代码少，简单，坏处：数据量大，有可能发送失败）
<?php
$data = [
['id' => 1,'title' => '我是标题一','created_at' => '2020-07-02'],
['id' => 2,'title' => '我是标题二','created_at' => '2020-07-03'],
['id' => 3,'title' => '我是标题三','created_at' => '2020-07-04'],
['id' => 4,'title' => '我是标题四','created_at' => '2020-07-05'],
['id' => 5,'title' => '我是标题五','created_at' => '2020-07-06'],
['id' => 6,'title' => '我是标题六','created_at' => '2020-07-07'],
['id' => 7,'title' => '我是标题七','created_at' => '2020-07-08'],
['id' => 8,'title' => '我是标题八','created_at' => '2020-07-09'],
['id' => 9,'title' => '我是标题九','created_at' => '2020-07-10'],
['id' => 10,'title' => '我是标题十','created_at' => '2020-07-11'],
['id' => 11,'title' => '我是标题十一','created_at' => '2020-07-12'],
['id' => 12,'title' => '我是标题十二','created_at' => '2020-07-13'],
['id' => 13,'title' => '我是标题十三','created_at' => '2020-07-14']
];
?>
<table id="table_id_example">
<thead>
<tr>
<th>ID</th>
<th>文章标题</th>
<th>加入时间</th>
<th>操作</th>
</tr>
</thead>
<?php foreach($data as $v):?>
<tr>
<th><?= $v['id']?></th>
<th><?= $v['title']?></th>
<th><?= $v['created_at']?></th>
<th><a>修改</a>|<a>删除</a></th>
</tr>
<?php endforeach;?>
</table>
?>到此，客户段分页已经完成，很简单。效果如下：
第二种服务端分页
首先需要开启服务段分页
<table id="table_id_example">
<thead>
<tr>
<th>ID</th>
<th>文章标题</th>
<th>加入时间</th>
<th>操作</th>
</tr>
</thead>
</table>
<script>
var dataTable = $('#table_id_example').DataTable({
"serverSide": true, //开启服务器端分页
ajax: {//进行ajax请求
url: 'ajax.php',
type: 'get'
},
//显示每列
columns: [
// {data:'字段名称1','defaultContent':'默认值','className':'类名'}
{data: 'id'},
{data: 'title'},
{data: 'created_at'},
{data: 'action', 'defaultContent': '默认action','className':'action-default'}
]
});
</script>
下面我们来自定义语言
<script>
var dataTable = $('#table_id_example').DataTable({
......
"language": {
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起，没有匹配的数据",
"sInfo": "第 _START_ - _END_ 条 / 共 _TOTAL_ 条数据",
"sInfoEmpty": "没有匹配的数据",
"sInfoFiltered": "(数据表中共 _MAX_ 条记录)",
"sProcessing": "正在加载中...",
"sSearch": "title搜索：",
"oPaginate": {
"sFirst": "第一页",
"sPrevious": " 上一页 ",
"sNext": " 下一页 ",
"sLast": " 最后一页 "
}
}
......
});
</script>效果：
禁止某一列排序，我们操作这一列不需要有排序功能，所以可以禁止掉,索引是从0开始的。
<script>
var dataTable = $('#table_id_example').DataTable({
......
columnDefs: [
{targets: [3], orderable: false},//索引第3列禁止排序
],
......
});
</script>展示效果：
有些人喜欢自定义搜索隐藏自带搜索和自定义下拉分页书数，lengthMenu属性可以自定义下拉分页数，而searching属性可以控制是否用自带的搜索。这时候就有一个问题了，后台分页时如何知道你按多少数据分页的，你的排序方式是按哪个字段进行什么排序的。下面我放一张截图来解释请求参数。
var dataTable = $('#table_id_example').DataTable({
......
lengthMenu:[10,20,30, 50],//下拉的分页数
searching:false,//隐藏搜索
......
});效果：
那自定义的搜索如何请求呢？需要自己去写一个form表单用于搜索提交数据。并且给form表单禁止submit提交。
在ajax请求中利用data属性动态实时获取用户输入的数据，并把其赋值给dataTable,然后doSearch方法中重新拉起一次dataTable请求，这时请求参数就添加了需要的字段和值;
<form method="get" onsubmit="return doSearch();">
<input autocomplete="off" placeholder="输入想要搜索的标题" value="" id="title">
<button>搜索标题</button>
</form>
<script>
var dataTable = $('#table_id_example').DataTable({
lengthMenu:[10,20,30, 50],//下拉的分页数
searching:false,//隐藏搜索
columnDefs: [
{targets: [3], orderable: false},//索引第3列禁止排序
],
"serverSide": true, //开启服务器端分页
ajax: {//进行ajax请求
url: 'ajax.php',
type: 'get',
//参数 动态获取表单数据用function
data:function (ret) {
ret.title = $.trim($('#title').val());//把title 放到请求参数里
}
},
"language": {
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起，没有匹配的数据",
"sInfo": "第 _START_ - _END_ 条 / 共 _TOTAL_ 条数据",
"sInfoEmpty": "没有匹配的数据",
"sInfoFiltered": "(数据表中共 _MAX_ 条记录)",
"sProcessing": "正在加载中...",
"sSearch": "title搜索：",
"oPaginate": {
"sFirst": "第一页",
"sPrevious": " 上一页 ",
"sNext": " 下一页 ",
"sLast": " 最后一页 "
}
},
//显示每列
columns: [
// {data:'字段名称1','defaultContent':'默认值','className':'类名'}
{data: 'id'},
{data: 'title'},
{data: 'created_at'},
{data: 'action', 'defaultContent': '默认action','className':'action-default'}
]
});
//搜索
function doSearch() {
dataTable.ajax.reload();//重新请求一次dataTable;
return false;
}
</script>可以清楚的看到title 参数已经加上了。
下面我们来处理操作这一列，一般会有修改和删除两个按钮。这个也有两种方法去实现。第一种实现方法是前端处理,在 createdRow:function (row, data, dataIndex) {}回调方法中获取到当前所在行的最后一列，然后把html添加进去。
<script>
var dataTable = $('#table_id_example').DataTable({
//回调方法row 当前行的dom data当前行的数据 dataIndex当前行的数据索引
createdRow:function (row, data, dataIndex) {
//行的最后一列 var let const
var id = data.id;
var td = $(row).find('td:last-child');
//显示的html内容
var html = `
<a href="/admin/article/${id}/edit">修改</a>
<a href="/admin/article/${id}" onclick="return delArticle(this);">删除</a>
`;//字符串模板
//填充
td.html(html);
}
});
//搜索
function doSearch() {
//重新请求一次dataTable;
dataTable.ajax.reload();
return false;
}
function delArticle(obj) {
let url = $(obj).attr('href');
//ajax请求
fetch(url, {
method: 'delete',
headers: {
'X-CSRF-TOKEN': 'csrf_token()'
}
}).then(res => {
return res.json();
}).then(({status,msg}) => {
if (status == 0) {
layer.msg(msg, {time: 2000, icon: 1}, () => {
window.location.reload();
});
}
});
return false;
}
</script>第二种方法就以laravel为例子来举例说明。可以在模型中定义一个字段(我这里叫action)只要和你的colums:[{data:'action'}]对应就可以。使用laravel的模型属性和方法去实现。
<?php
namespace App\Models;
class Article extends Base
{
//追加一个字段
protected $appends = ['action'];
//访问器
public function getActionAttribute()
{
return '<a href="route('admin.article.edit', $this->id)">修改</a>
<a href="route('admin.article.destroy',$this->id)">删除</a>';
}
}
var dataTable = $('#table_id_example').DataTable({
......
//显示每列
columns: [
// {data:'字段名称1','defaultContent':'默认值','className':'类名'}
{data: 'id'},
{data: 'title'},
{data: 'created_at'},
{data: 'action', 'defaultContent': '默认action','className':'action-default'}
]
......
});
Comment here is closed