datatables-cn
datatables-cn copied to clipboard
Published
20 hours ago •
ssy341
ssy341
FAQs(常见问题列表)整理
FAQs(常见问题列表)整理
勿忘初心，方得始终
为便于存档管理和分享备用，特建立此列表来维护FAQs。
用于整理常见的问题列表，区别于中文网的 FAQs。
初步考虑收集来自QQ群的问题。欢迎大家贡献~
别问我是谁，请叫我雷锋
PS:
- 多数互联网公司招聘时，会参考你git上contributions的数量，来确定你是否是一个喜欢新鲜事物的极客，并且是一个分享者。所以一个比较好的repositories是值得大家、社区来维护和分享的。希望大家积极参与。
- github支持markdown，md逐渐成为一种主流的文档结构，便于大家来写各种文档（api文档、说明文档、项目文档等等），就连gitbook也支持并建议使用markdown进行写书，所以为了自己、为了社区，多贡献自己的知识。
一个比较好的表格树（treegird）的例子： 代码和效果 直接看结果
常见的错误提示
- Cannot call method ’fnSetData‘ of undefined
- 原因：表格中有class为hidden的列，使得内容部分的列数多于表头
- $(...).dataTable is not a function
- 原因：检查DT js 有没有引入，看控制台有无报错，比如404类似错误
- $("#example").dataTable({...}) 和 $("#example").DataTable({...}) 的区别
- 1.10.x版本后，有两种初始化的写法， $().dataTable() 返回的是一个jQuery实例， $().DataTable() 返回的是Datatables的api实例， 如果在使用过程中出现某某方法不存在不支持之类的，一般都是由于是用第一种方法初始化dt，用返回的对象去调用DataTables 的 api方法，所以报错误。 dt的api实例和jquery可以互转 ，jquery转api：dt.api();api转jquery：dt.to$(); 详细参考 api手册
- Cannot read property 'aDataSort' of undefined
🔴 小伙伴们经常提的问题归纳（扩展）
怎么冻结列，冻结表头
怎么指定跳转到页数？
搜索条件 && 或者 || [search("a b")]？
自定义返回数据格式 （dataSrc）
🔴 小伙伴们经常提的问题归纳（高级）
DataTable 单元格合并
DataTable 跨页选择（服务器客户端通用）
DataTables 动态列问题
参考 #4
DataTables 行内编辑
参考 行内编辑例子
DataTables 服务器模式
- 接受、返回数据格式 参考
- java实现服务器模式
后台异常，如何显示服务器返回的自定义错误，而不是弹出报错
$.fn.dataTable.ext.errMode = function( settings, tn, msg){
//打印msg，和tn来判断，进了这个方法都是ajax走了error才会到这里来
}
//绑定xhr事件
table.on('xhr.dt',
function (e, settings, json, xhr) {
console.log(xhr)
if (xhr.status == 200) {
//自己的代码
} else {
//自己的代码
}
});
DataTables布局即 dom 选项的使用 参考1 参考2
- dom的具体参数说明
- dom和language中参数配置的结合，来显示合适的分页、翻页信息
- dt与bootstrap的栅格的结合（通过栅格来控制相对宽度，以适应多分辨率下table的浏览）
- dom中某个组件的扩展：
- 跳转到第?页
- 一些按钮的样式附加，根据id来写css优化样式
🔴 小伙伴们经常提的问题归纳（初级）
如何检查自己使用的DT是什么版本？
$.fn.dataTable.versionCheck()
DataTables参数名有些混乱了，为什么？
DataTables数据来源
- dom数据
- jquery ajax获取数据交给dt处理
- DataTables自有的取数方式
DataTables 滚动条
ps：开启滚动条后，DT会把thead和tbody分为两个table来显示，如果发现有两个表头或者是列和表头对应不齐，大多数情况是因为css冲突导致，建议把其他css先去掉，排除法找到冲突的css。关于表头缩在一起的问题可以参考 #9 获取能有所启发
DataTables 选中行
- 选择单行 参考
- 选择多行 参考
- 跨页选择
- 获取选中行的值（每个单元格或者一整行，包含隐藏列） 参考
table.row('.selected').data()即为一整行的值table.row('.selected').data().id获取这一行每个单元格的值 - 添加序号
DataTables单元格渲染
- checkbox/redio/button 参考
- 内容替换 - 1/0 替换成 是/否、url替换成可跳转的a标签或者img 参考
- 内容格式化 - 时间戳改为日期格式、内容太长不换行 参考
- 数字优化显示 参考
DataTables rowspan 和 colspan
如何保持当前页的状态刷新数据
var dt = $("#tableid").DataTable({……});
//再需要刷新的地方调用下面这个方法
dt.ajax.reload(null,false)
var dt = $("#tableid").DataTable({……});
//再需重绘的地方调用下面这个方法
dt.draw(false);
@unicornSail 上面有写到，请自行检查，这个不是提问帖，有问题麻烦单独提出 ps：开启滚动条后，DT会把thead和tbody分为两个table来显示，如果发现有两个表头或者是列和表头对应不齐，大多数情况是因为css冲突导致，建议把其他css先去掉，排除法找到冲突的css。关于表头缩在一起的问题可以参考 #9 获取能有所启发
样式相关
#428 增加排序按钮 #431 表头样式 #443 Bootstrap样式 #451 Bootstrap样式
具体css中table宽度的计算参见