今天真的被这破插件气疯了，于是有了下面的截图。此文不定期更新，要是有新坑欢迎来填。

jQuery DataTables 的几个坑，监听、重载等等

看看截图娱乐娱乐

好了，正事儿要紧，先来说说这玩意儿的加载过程

首先必不可少的 jQuery、DataTables.js、DataTables.css 的引入略过

我们先手写好一张 table 表格，大概就像下面这样

<!-- 我就写简单点，去掉了所有 class，根据样式自己添加 -->
<table id="user-list"><thead><tr><th>ID</th><th>账号</th><th>用户组</th><th>账号状态</th><th>添加时间</th><th>操作</th></tr></thead><!-- tbody 这儿留空，依靠 Ajax 返回的数据填充 --><tbody></tbody>
</table>

来吧，先大概写个 JS

说一下，下方的一些参数，大家在网上可能经常看到 a、b 开头的写法，那是旧式写法，当然是不影响使用的，推荐用新驼峰写法。对应表：Datatables | 升级 | 1.10.x与1.9.x参数名对照表

// 根据上面的 HTML 代码操作，上方已定义 table 的 id 为 user-list
var table = $('#user-list');
table.DataTable({/*** 分页的几个显示方式，大致翻译一下* `numbers` - 仅含页码按钮* `simple` - 仅含“上一页”和“下一页”* 'simple_numbers` - “上一页”和“下一页”，加上页码* `full` - “首页”，“上一页”，“下一页”，“尾页”按钮* `full_numbers` - “首页”，“上一页”，“下一页”，“尾页”按钮以及页码* `first_last_numbers` - “首页”和“尾页”按钮，加上页码*/pagingType: 'full_numbers', // 所以这儿我用了 full_numberslengthMenu: [10, 15, 20],   // 可选每页显示数量serverSide: true, // 服务端分页searching: true,  // 过滤功能ordering: true,   // 排序功能columnDefs: [{orderable: false,targets: [1, 2, 5] // 指定不排序列，下标 0（比如 ID，从 0 开始数，此处帐号、用户组和操作不能排序）}],language: {url: '/assets/js/plugins/datatables/Chinese.json' // 语言文件，下方会贴出来},ajax: {url: '',     // 异步请求地址，没啥好说的type: 'get', // 请求方式，因为是取数据，所以我选择了 getdata: ''     // 额外请求参数，一般是不需要的},// 暂时先写这部分，下部分再慢慢道来
});

官方对于服务器端的说明在这儿：服务器处理(server-side) 手册 Datatables 中文网

当然了，爱看不看…从“服务器需要返回的数据(Returned data)”这一段（上方链接带上了锚点，访问即可到达），我们可以看到服务端需要返回什么数据：

名称	类型	简述
draw	`integer\|JS`	DataTables 每次发送请求会带上这个参数，接收到以后转成 `int` 类型返回去就行。PHP 直接 `intval($draw)` 非常方便
recordsTotal	`integer\|JS`	总记录数（未过滤）
recordsFiltered	`integer\|JS`	记录数（已过滤/检索）
data	`array\|Type`	重点数据，靠这玩意儿完成数据填充
error	`string\|JS`	可选：这个参数用于异常时返回一个提示
-	-	下方是额外参数，爱看不看 too。下方参数要放进 data 里数组的每一个元素内（不明白？没事…后面有示例）
DT_RowId	`string\|JS`	表格每行数据，也就是 `<tr>` 上加一个 ID
DT_RowClass	`string\|JS`	同上 `<tr>` 加一个 `class` 样式
DT_RowData	`object\|JS`	扔一点数据到 `columns.render` 的 `row` 参数里
DT_RowAttr	`object\|JS`	为 `<tr>` 添加一个属性，例如 `<tr data-val="what">`
-	-	这部分额外参数通过服务端传入，并自动绑定。无需额外操作

通过上方表格的简述，我们知道了 DataTables 需要从服务端返回什么数据，下面就是一个简单的数据格式返回，代码为 “拍黄片” PHP

// 假设我们已经从数据库拿到用户列表并存入了变量 $userList
// 在这儿先对数据进行一次处理，便于前端显示
foreach ($userList as $key => $val) {$userList[$key]['DT_RowClass'] = "text-center"; // 可忽略这个$userList[$key]['add_time'] = date('Y-m-d H:i', $val['add_time']); // 格式化时间$userList[$key]['operate'] = [ // 解释一下这个，因为我们 HTML 中最后一列是操作，含有编辑和删除功能，数据库肯定是没有这个相关数据的，我们模拟一个 `operate` 列出来。放入 ID 是因为我们编辑和删除需要这货啊！'id' => $val['id']];
}
$data = [// 前面说了这个按照接收数据来返回，为了防止 XSS 攻击// 我这儿就没详写，因为我用 Laravel 框架这儿直接 $request->draw'draw' => 1,// 用户数据存入 data'data' => $userList,// 总记录数（不过滤）'recordsTotal' => $count, // 实际有多少就是多少// 记录数（已过滤）'recordsFiltered' => $filteredCount // 经过检索/过滤后的
];
if (!$userList) {$data['error'] = '这儿什么也没有';
}
// 实际上...在 Laravel 框架中直接 return $data 会自动变成 Json，嘿...嘿嘿嘿
return json_encode($data);

这儿再说一下排序，我是这么做的。还是爱看不看…

// 依旧是 Laravel 框架，$request->order 这个可以看成 _GET['order']
// 接收请求拿到 DataTables 传过来的 order
$order = $request->order;
// 将排序字段名和值组合成新数组
$order = [$request->columns[$order[0]['column']]['data'] => $order[0]['dir']
];
// 此时的 $order 是一个数组，形式为 id => desc
// 在写取数据方法的时候建议给 $order 一个默认值

现在数据拿到了，再来处理处理第 3 步未完成的 JS

// 其实也就是再加一个 columns。注意下方代码和第 3 步是衔接的
columns: [// 这里 data 后的值如果 SQL 语句正常默认就是字段名{data: 'id'},{data: 'username'},{   // 这里也是一段重要的说明，如下代码，我数据库内 status 状态存的数字// 在这儿总不能显示 0 和 1 吧？我们需要通过 render 方法来执行一些数据处理// 当然也可以加一些样式在这个地方，文章末尾会有截图可供参考data: 'status', render: function (data) {var content;switch (data) {case 0:content = '已禁用';break;case 1:content = '正常';break;case -1:content = '已删除';break;}return content;}},{data: 'add_time'},{// 对了，前文的额外参数 DT_RowData，在下行 function 括号内的第三个参数可以获取。// 当然我前面并没有传入这个数据，所以下行的 type 和 row 并未使用，可删除data: 'operate', render: function (data, type, row) {// TODO: return(string);/*这里的代码我就不写上来了，关于操作前面说了就是两个按钮，一个编辑一个删除每个人的样式不一样，而我前面的 PHP 代码里给 data 传了一个 ID此处可以通过 data.id 得到其值类似这样：return '<button data-id="' + data.id + '"></button>';至此，数据已经可以拿到并成功显示啦！*/ }}
]

低调上图：（文中精简了不少东西嘛，使用 BootStrap 样式更佳哦~）

Emmm…一不小心就把这货写清楚了

这儿说说我遇到的几个坑：

首先第一个！不要去重复 table.dataTable({});。不然就是一个弹框提示你无法重新初始化，顶部图1的由来。

前文说到我的最后一列是两个按钮，我尝试过用 $('table tbody button').click(); 的方式，根本监听不了，最后发现要用 on，也就是

// table 为之前用于初始化 DataTables 的那个，等于上文已存入 table 变量的 $('#user-list')
// tbody 这个可以不要，个人习惯精确定位
// on 后面的第一个参数为事件参数，什么 touch 啊，click 啊之类
// 第二个就是重点，精确到你要监听事件的控件、标签。例如我要监听按钮就写 tr button
// 第三个匿名函数没什么好说的
table.find('tbody').on('click', 'tr button', function (){// TODO: ...var $this = $(this); // 可以拿到当前操作的对象
});

再就是所有的 API！必须使用 table.api() 调用

我最开始看文档的示例：重新加载数据(ajax.reload()) 选项(option) 参考(reference) Datatables 中文网
MD！这里面根本没写 api() 好吗，最后在 Google 搜索到这篇：table.ajax.reload() is undefined — DataTables forums 才解决…哎！
当然不带 api() 的方法是把 DataTables 初始代码存入变量，直接使用那个变量就无需 $('#table').api() 这样的形式使用，例如：
```
var table = $('#table').DataTable({// TODO: 各种配置
});
table.ajax.reload();
```
还有…待更吧…

差点忘了中文支持：（非官方，有小修改。官方在这儿 Chinese - DataTables）

{"sProcessing": "处理中...","sLengthMenu": "显示 _MENU_ 项结果","sZeroRecords": "没有相应内容","sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项","sInfoEmpty": "显示第 0 至 0 项结果，共 0 项","sInfoFiltered": "（由 _MAX_ 项结果过滤）","sInfoPostFix": "","sSearch": "搜索:","sUrl": "","sEmptyTable": "表中数据为空","sLoadingRecords": "加载中...","sInfoThousands": ",","oPaginate": {"sFirst": "首页","sPrevious": "上页","sNext": "下页","sLast": "末页"},"oAria": {"sSortAscending": ": 以升序排列此列","sSortDescending": ": 以降序排列此列"}
}

jQuery DataTables 的几个坑，异步加载（服务器）、监听、重载等等相关推荐

android图片查看器，实现图片加载进度监听，实现保存图片
1.添加依赖 implementation 'com.github.bumptech.glide:glide:4.6.1' compile 'com.github.chrisbanes:PhotoVi ...
Glide4实现网络图片加载进度监听
前言我们都知道,使用Glide来加载一张网络上的图片是非常简单的,但是让人头疼的是,我们却无从得知当前图片的下载进度.如果这张图片很小的话,那么问题也不大,反正很快就会被加载出来.但如果这是一张比较 ...
【懒加载】监听视图是否到达可视区域
前言功能参考饿了么的图片组件里的懒加载图片(地址) 想要实现在快滚动到底部的时候去动态加载图片,前面写到过的监听滚动条去做懒加载也可以做到,但是想用更优雅的写法来实现,即用本地占位图片来替换网络图片 ...
yepnope.js 异步加载资源文件
yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本,可以在页面上仅加载用户需要的js/css. yepnope的优点: 可以同时处理javascript以及css 能够按条件 ...
yepnope.js – 异步加载资源文件
yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本,可以在页面上仅加载用户需要的js/css. 典型代码示例 yepnope({test : Modernizr.geoloc ...
Android之ListView异步加载图片且仅显示可见子项中的图片
折腾了好多天,遇到 N 多让人崩溃无语的问题,不过今天终于有些收获了,这是实验的第一版,有些混乱,下一步进行改造细分,先把代码记录在这儿吧. 网上查了很多资料,发现都千篇一律,抄来抄去,很多细节和完整 ...
ImageLoader实现图片异步加载
ImageLoader是一个广泛使用的图片库,在向网络请求图片时,使用imageView和smartView常会产生outofmemory错误,这时ImageLoader可以起到很大的作用,主要有如下 ...
JQuery Datatables 动态配置参数异步加载数据
背景需求在前端动态设置datatables需要传递到后端的查询参数,异步加载返回的数据.点击这里进入datatables中文网异步加载数据说明直接上代码 var table; var url = ...
Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...

jQuery DataTables 的几个坑，异步加载（服务器）、监听、重载等等

jQuery DataTables 的几个坑，监听、重载等等

看看截图娱乐娱乐

好了，正事儿要紧，先来说说这玩意儿的加载过程

Emmm…一不小心就把这货写清楚了

jQuery DataTables 的几个坑，异步加载（服务器）、监听、重载等等相关推荐

最新文章

热门文章