jQuery 重绘数据表的正确方法？出现错误：“没有方法‘fnDraw’”和“无法读取属性‘oFeatures’”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14894436/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Correct way to redraw a DataTable? Getting errors: "no method 'fnDraw'" and "cannot read property 'oFeatures'"
提问by rwb
I have inherited the following code:
我继承了以下代码：
// Show / Hide table rows from checkboxes
$("table.data#report-table .warning").toggle($("#warning_checkbox").is(":checked"));
$("#warning_checkbox").click(function() {
$("table.data#report-table .warning").toggle($("#warning_checkbox").is(":checked"));
$('.data_table#report-table').dataTable().fnDraw();
});
When a checkbox with id warning_checkboxis checked, it shows/hides the rows (actually, tbodyelements) of table.data#report-tablewhich have the class .warning
当一个带有 id 的复选框warning_checkbox被选中时，它会显示/隐藏具有类的行（实际上是tbody元素）table.data#report-table.warning
As far as i can see, there is no '.data_table#report-tableelement on the page - so i assumed something wouldnt work. However - it (magically?) does, i.e. the table is redrawn as expected, preserving its correct settings. I do however get the following error in the Chrome console:
据我所知，'.data_table#report-table页面上没有元素 - 所以我认为有些东西不起作用。但是 - 它（神奇地？）确实如此，即表格按预期重绘，保留其正确设置。但是，我在 Chrome 控制台中收到以下错误：
Uncaught TypeError: Cannot read property 'oFeatures' of null
Which i thought may be due to the missing element (but then how does it still work?) Anyway, i rewrote the code as a function as i need to reuse it elsewhere:
我认为这可能是由于缺少元素（但是它如何仍然有效？）无论如何，我将代码重写为函数，因为我需要在其他地方重用它：
var checkbox_rows = function(checkbox_id, table_id, tbody_class) {
var checkbox = $('div.buttons input[id$='+checkbox_id+']');
var table = $('table.data[id$='+table_id+']');
checkbox.click(function() {
$('tbody[class$='+tbody_class+']', table).toggle(checkbox.is(':checked'));
table.fnDraw();
});
}
checkbox_rows('warning_checkbox', 'report-table', 'warning');
This also works (and makes more sense to me) - but now i get a different error in the Chrome Console:
这也有效（对我来说更有意义） - 但现在我在 Chrome 控制台中收到一个不同的错误：
Uncaught TypeError: Object [object Object] has no method 'fnDraw'
So my question is, what am i doing wrong? What is the correct way to redraw a DataTable?
所以我的问题是，我做错了什么？重绘数据表的正确方法是什么？
Thank you
谢谢
回答by Eero Helenius
In your modified code, you're calling fnDraw()on the jQuery $('table')object — which has no associated fnDraw()method — instead of the DataTable object.
在修改后的代码中，您调用fnDraw()的是 jQuery$('table')对象——它没有关联的fnDraw()方法——而不是 DataTable 对象。
You'll want to call fnDraw()on the object you originally call dataTable()on, as in:
您需要调用fnDraw()最初调用的对象dataTable()，如下所示：
$(document).ready(function() {
var oTable = $('#yourDataTable').dataTable();
oTable.fnDraw();
});
So this wouldn't work:
所以这行不通：
$(document).ready(function() {
var oTable = $('#yourDataTable');
oTable.fnDraw(); // Won't work, because the dataTable() method wasn't called above
});
If you can't access the original object you called dataTable()on any more for some reason (difficult to say without seeing more of your code), you could try reinitializing the table by calling dataTable()on tableand optionally passing in bDestroyor bRetrieve, depending on what you need. So something like:
如果您无法访问您呼叫的原始对象dataTable()上的任何更多的出于某种原因（很难说没有看到更多的代码的），你可以尝试通过调用重新初始化表dataTable()上table，并通过可选的bDestroy或bRetrieve，这取决于你所需要的。所以像：
table.dataTable({ "bRetrieve": true });
(I'm honestly not sure whether you'd need to call fnDraw()any more after that.)
（老实说，我不确定fnDraw()在那之后您是否还需要再打电话。）
