常见问题(Frequently Asked Questions)

DataTables 在给我们项目中带来便捷的同时,在使用过程中也会出现不少问题。下面列举了小伙伴们平时询问得最多的问题。

获得帮助

我有一个问题,我怎么得到帮助?

目前有Datatables中文网,方便大家查阅例子和参数文档,您还可以直接查看 原官网 。 你可以按照如下步骤来了解DataTables:

如何在群里寻求大家帮助?

首先在首页或者底部加入中文网官方讨论群 ,但是需要注意一下,确保自己已经看过下面列出的常见问题。如果没有,自己把问题整理清楚。 提问先 上效果图片然后描述问题最后贴代码(不要吝啬,多贴些不会说你刷屏的)。 如果有报错的贴报错,如果是服务器处理的(加了serverSide属性为true)贴上服务器返回数据。 问题要明确,给足够的信息,别人才能判断、才能帮助你(注意禁止在上班期间私聊别人请教问题,不管你有多急,请尊重别人的时间,群友如果知道一般会回答)。 如果还是不能解决,根据实际情况再远程协助,希望大家快乐学习。 注:如果你也有faqs,也可以提交给我,帮助到别人 >>更多


一般初始化

1,我觉得Datatables在加载的时候比较慢,有没有让Datatables更快一点

答:有下列几个方法可以提高Datatables的速度,大家根据自己的情况选择合适的办法

注意:如果你使用的是ie6,7这样的,上面的数字可能会少一些。此外如果你使用的是firefox的firebug,你要关掉它,因为他会给性能造成负面影响

2,表格不能正常显示

Datatables所需要的table是比较严谨的,table里必须包含thead和tbody标签(1.10.x+好像不需要tbody也行了,大家注意自己多尝试)。再检查其他html是否有效,控制台有没有错误?初次使用Datatables参考 安装手册

3,表格显示的样式和例子的不同

检查css样式文件是否引入正确(名称和路径),还有页面上引入的其他css有没有一并引入

4,如何按照自己的喜好摆放Datatables的控件

配置 domOption 属性来自由摆放, 示例


最常见问题

1,我现在还在使用1.9.x的版本,去哪里查看文档?

旧版本的文档可以查阅这个 网址 ,因为考虑到版本升级,新版的Datatables对旧版做了兼容性处理,大部分的 配置选项方法在新版中依然兼容,但还是推荐直接升级到最新版使用。 1.10.x与1.9.x参数名对照表

2,json数据解析错误

这个是由于没有按照json的格式返回或者是缺少Datatables指定的参数

3,我在ie中会提示错误,但是chrome、ff这些浏览器却不会

一般可能是缺少逗号,在ie浏览器下会抛出错误,但是chrome这些浏览器会忽略这些错误

4,为什么表头会缩在一起,刷新页面后又正常了

在dt初始化的时候,会用类似jquery $().width()这种函数获取table父容器的宽度,如果父容器的style display属性是none的话, 获取到的宽度值就会是0,然后dt就会使用自己默认宽度值100px进行替代运算,结果就缩到一起。 或者是CSS样式没有引入正确。如果确保不是以上问题参考 datatables 采用bootstrap的tab方式,表头会缩在一起,为什么?

5,怎么取消掉 DataTables 弹出的错误提示?

使用 $.fn.dataTable.ext.errMode = function(s,h,m){} 覆盖掉默认的即可

6,使用bootstrap页码分页问题,在上页被禁用情况下,点击也向服务器请求数据,为什么

这个是一个bug,问题是因为代码里只是设置了按钮的禁用状态,但是没有把按钮的点击事件屏蔽掉,所以还可以向服务器请求

7,$("#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手册


常见错误

1,控制台报错,提示api方法不可用

1.10.x版本后,有两种初始化的写法, $().dataTable() 返回的是一个jQuery实例, $().DataTable() 返回的是Datatables的api实例, 如果在使用过程中出现某某方法不存在不支持之类的,一般都是由于是用第一种方法初始化dt,用返回的对象去调用api的方法,所以报错误。 dt的api实例和jquery可以互转 ,jquery转api:dt.api();api转jquery:dt.to$(); 详细参考 api手册

2,弹出提示 Invalid JSON response 是什么意思?

根据提示翻译,无效的json返回。那么只需要看请求返回的数据即可知道问题所在。 正确返回的数据格式为 {data:[{name:"datatables中文网",url:"datatables.club"}]} 如何查看返回数据?

3,弹出提示 Datatables warning:Non-table node initialisation (DIV) 是怎么回事

这个根据提示很容易看出,没有一个table节点初始化,出现这个情况可能是因为你定义的 id 在非 table 元素上

4,弹出提示 Cannot reinitialise DataTable 或者是 Cannot destroy DataTable 是怎么回事

加上 retrieve:true 和 destroy:true 两个参数即可 另见: retrieveOption destroyOption 参数具体含义

5,控制台报错 Cannot set property 'nTf' of undefined 是怎么回事

th 和 columns.data 的数量不匹配,html里定义的th数量和 columns:[{data:"name"}]里的数量不匹配, 有多少th,columns里就有多少个对象

6,控制台报错 Cannot read property 'length' of null 或者 Cannot read property 'length' of undefined 是怎么回事

这个一般是返回的数据有问题,比如应该返回{data:[……]}而不是{tabledata:[……]},或者数据为空因该返回{data:[]} 而不是{data:null}{data:""},dt识别不了所以报此错误 正确返回的数据格式为 {data:[{name:"datatables中文网",url:"datatables.club"}]}

7,弹出提示 Requested unknown parameter 'id' for row 0 是怎么回事

  • 1可能你在columns里指定了,但在返回的数据里没有的时候,或者列数不匹配不对应,你会得到这个错误
  • 2请检查返回数据的的id属性名,是不是js里data绑定的是id,而数据源里是ida,或者是没有这个;或者数据为null的情况
  • 3这个错误指出很明确了返回的一个未知的参数(和columns.data不匹配)
  • 4tbody里不要写任何内容,除非你是dom数据源。所以 检查返回的数据和js绑定的数据
按照以上步骤,一般能解决问题

8,控制台报错 Uncaught TypeError: Cannot read property 'style' of undefined

在Datatables初始化时columns里定义了n列,但是thead的th是n-1(两者数量不等,th数目需和js里定义的columns中的data个数相等)

8,控制台报错 Cannot call method ’fnSetData‘ of undefined

表格中有class为hidden的列,使得内容部分的列数多于表头

9,$(...).dataTable is not a function 或者 $(...).DataTable is not a function

检查DT js 有没有引入,看控制台有无报错,比如404类似错误

10,Cannot read property 'aDataSort' of undefined

JQuery Datatables : Cannot read property 'aDataSort' of undefined


经常提的问题

初级

1,如何检查自己使用的DT是什么版本?

$.fn.dataTable.versionCheck()

2,DataTables参数名有些混乱了,为什么?

1.9- 为老版,1.10+为新版,具体区别 看这里 新版用法参考

3,DataTables支持什么样的数据源

AJAX取数DOM数据直接渲染js数组服务器处理

4,DataTables 滚动条

水平滚动条垂直滚动条水平和垂直滚动条, ps:开启滚动条后,DT会把thead和tbody分为两个table来显示,如果发现有两个表头或者是列和表头对应不齐, 大多数情况是因为css冲突导致,建议把其他css先去掉,排除法找到冲突的css。关于表头缩在一起的问题可以参考 #9或许能有所启发

5,DataTables 选中行

选择单行选择多行 获取选中行的值(每个单元格或者一整行,包含隐藏列)table.row('.selected').data() 即为一整行的值 table.row('.selected').data().id 获取这一行每个单元格的值 添加序号

6,DataTables单元格渲染

checkbox/redio/button内容替换 - 1/0 替换成 是/否、url替换成可跳转的a标签或者img内容格式化 - 时间戳改为日期格式、内容太长不换行数字优化显示

7,DataTables rowspan 和 colspan 复杂表头

复杂表头 实例1复杂表头 实例2 (ps:不能在js里配置复杂表头)

8,如何保持当前页的状态刷新数据

var dt = $("#tableid").DataTable({……});
//再需要刷新的地方调用下面这个方法
dt.ajax.reload(null,false)

var dt = $("#tableid").DataTable({……});
//再需重绘的地方调用下面这个方法
dt.draw(false);

高级

1,DataTable 单元格合并怎么做?

暂时没有答案

2,DataTables 跨页选择(服务器客户端通用)

DataTables 跨页选择(服务器客户端通用)

3,DataTables 动态列问题

DataTables 动态列问题

4,DataTables 行内编辑

DataTables 行内编辑

5,DataTables 服务器模式

参考DataTables 服务器模式手册 java实现服务器模式

6,后台异常,如何显示服务器返回的自定义错误,而不是弹出报错

$.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 {
        //自己的代码
    }
});

7,怎么按照自己要求布局DataTables的各个元素

参考DOM参数 例子

扩展

1,怎么冻结列,冻结表头?

DataTables扩展入口

2,怎么指定跳转到页数?

DataTables插件入口 跳到指定页(extjs)

3,搜索条件 && 或者 || [search("a b")]?

jquery-datatables-or-search-filter

4,自定义返回数据格式 (dataSrc)

Custom data source property dataSrc and pagination issue


许可


开发中常见问题

http://datatables.net/faqs/index

Translation from DataTables.net, with permission