DataTables 在给我们项目中带来便捷的同时,在使用过程中也会出现不少问题。下面列举了小伙伴们平时询问得最多的问题。
目前有Datatables中文网,方便大家查阅例子和参数文档,您还可以直接查看 原官网 。 你可以按照如下步骤来了解DataTables:
首先在首页或者底部加入中文网官方讨论群 ,但是需要注意一下,确保自己已经看过下面列出的常见问题。如果没有,自己把问题整理清楚。 提问先 上效果图片 ,然后描述问题,最后贴代码(不要吝啬,多贴些不会说你刷屏的)。 如果有报错的贴报错,如果是服务器处理的(加了serverSide属性为true)贴上服务器返回数据。 问题要明确,给足够的信息,别人才能判断、才能帮助你(注意禁止在上班期间私聊别人请教问题,不管你有多急,请尊重别人的时间,群友如果知道一般会回答)。 如果还是不能解决,根据实际情况再远程协助,希望大家快乐学习。 注:如果你也有faqs,也可以提交给我,帮助到别人 >>更多
答:有下列几个方法可以提高Datatables的速度,大家根据自己的情况选择合适的办法
orderClassesOption
deferRenderOption
serverSideOption
)Datatables所需要的table是比较严谨的,table里必须包含thead和tbody标签(1.10.x+好像不需要tbody也行了,大家注意自己多尝试)。再检查其他html是否有效,控制台有没有错误?初次使用Datatables参考 安装手册
检查css样式文件是否引入正确(名称和路径),还有页面上引入的其他css有没有一并引入
旧版本的文档可以查阅这个 网址 ,因为考虑到版本升级,新版的Datatables对旧版做了兼容性处理,大部分的 配置选项方法在新版中依然兼容,但还是推荐直接升级到最新版使用。 1.10.x与1.9.x参数名对照表
这个是由于没有按照json的格式返回或者是缺少Datatables指定的参数
一般可能是缺少逗号,在ie浏览器下会抛出错误,但是chrome这些浏览器会忽略这些错误
在dt初始化的时候,会用类似jquery $().width()这种函数获取table父容器的宽度,如果父容器的style display属性是none的话, 获取到的宽度值就会是0,然后dt就会使用自己默认宽度值100px进行替代运算,结果就缩到一起。 或者是CSS样式没有引入正确。如果确保不是以上问题参考 datatables 采用bootstrap的tab方式,表头会缩在一起,为什么?
使用 $.fn.dataTable.ext.errMode = function(s,h,m){}
覆盖掉默认的即可
这个是一个bug,问题是因为代码里只是设置了按钮的禁用状态,但是没有把按钮的点击事件屏蔽掉,所以还可以向服务器请求
1.10.x版本后,有两种初始化的写法, $().dataTable() 返回的是一个jQuery实例, $().DataTable() 返回的是Datatables的api实例, 如果在使用过程中出现某某方法不存在不支持之类的, 一般都是由于是用第一种方法初始化dt,用返回的对象去调用DataTables 的 api方法,所以报错误。 dt的api实例和jquery可以互转 ,jquery转api:dt.api();api转jquery:dt.to$(); 详细参考 API手册
1.10.x版本后,有两种初始化的写法, $().dataTable()
返回的是一个jQuery实例,
$().DataTable()
返回的是Datatables的api实例,
如果在使用过程中出现某某方法不存在不支持之类的,一般都是由于是用第一种方法初始化dt,用返回的对象去调用api的方法,所以报错误。
dt的api实例和jquery可以互转 ,jquery转api:dt.api();api转jquery:dt.to$();
详细参考 api手册
根据提示翻译,无效的json返回。那么只需要看请求返回的数据即可知道问题所在。
正确返回的数据格式为 {data:[{name:"datatables中文网",url:"datatables.club"}]}
如何查看返回数据?
这个根据提示很容易看出,没有一个table节点初始化,出现这个情况可能是因为你定义的 id 在非 table 元素上
加上 retrieve:true 和 destroy:true 两个参数即可
另见:
retrieveOption
destroyOption
参数具体含义
th 和 columns.data 的数量不匹配,html里定义的th数量和 columns:[{data:"name"}]里的数量不匹配, 有多少th,columns里就有多少个对象
这个一般是返回的数据有问题,比如应该返回{data:[……]}
而不是{tabledata:[……]}
,或者数据为空因该返回{data:[]}
而不是{data:null}
、{data:""}
,dt识别不了所以报此错误
正确返回的数据格式为 {data:[{name:"datatables中文网",url:"datatables.club"}]}
在Datatables初始化时columns里定义了n列,但是thead的th是n-1(两者数量不等,th数目需和js里定义的columns中的data个数相等)
表格中有class为hidden的列,使得内容部分的列数多于表头
检查DT js 有没有引入,看控制台有无报错,比如404类似错误
JQuery Datatables : Cannot read property 'aDataSort' of undefined
$.fn.dataTable.versionCheck()
水平滚动条, 垂直滚动条, 水平和垂直滚动条, ps:开启滚动条后,DT会把thead和tbody分为两个table来显示,如果发现有两个表头或者是列和表头对应不齐, 大多数情况是因为css冲突导致,建议把其他css先去掉,排除法找到冲突的css。关于表头缩在一起的问题可以参考 #9或许能有所启发
选择单行, 选择多行, 获取选中行的值(每个单元格或者一整行,包含隐藏列)table.row('.selected').data() 即为一整行的值 table.row('.selected').data().id 获取这一行每个单元格的值 , 添加序号
checkbox/redio/button, 内容替换 - 1/0 替换成 是/否、url替换成可跳转的a标签或者img, 内容格式化 - 时间戳改为日期格式、内容太长不换行, 数字优化显示
var dt = $("#tableid").DataTable({……}); //再需要刷新的地方调用下面这个方法 dt.ajax.reload(null,false) var dt = $("#tableid").DataTable({……}); //再需重绘的地方调用下面这个方法 dt.draw(false);
暂时没有答案
$.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 { //自己的代码 } });
Translation from DataTables.net, with permission