JQuery 数据表 - AJAX 重新加载不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8043076/
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
JQuery DataTables - AJAX Reloading Not Working
提问by JimmyJammed
I am using DataTables to display some data. When a new record is added (via AJAX), I am trying to reload the table on success. I get the error "oTable is not defined" whenever I try to call either oTable.fnDraw() or oTable.fnReloadAjax(). What am I doing wrong?
我正在使用 DataTables 来显示一些数据。添加新记录时（通过 AJAX），我尝试在成功时重新加载表。每当我尝试调用 oTable.fnDraw() 或 oTable.fnReloadAjax() 时，都会收到错误“oTable 未定义”。我究竟做错了什么？
I have tried both fnDraw() and fnReloadAjax() and both return the same error.
我已经尝试过 fnDraw() 和 fnReloadAjax() 并且都返回相同的错误。
$(document).ready(function(){
var oTable = $('.admin_users').dataTable({
"bProcessing": true,
"sAjaxSource": 'sql/admin_users.php',
"aaSorting": [[ 0, "asc" ]],
"bJQueryUI": true,
"sPaginationType": "full_numbers",
// "sAjaxSource": 'SQL/dataTable.php',
"bStateSave": true, //Use a cookie to save current display of items
"aoColumns": [
null,
null,
null,
null,
{ "sType": "date", "sClass":"center" }
],
"bScrollCollapse": true,
"sScrollX": "100%"
});
oTable.fnAdjustColumnSizing();
Manual Re-Draw Button:
手动重绘按钮：
$('#click_me').click( function () {
oTable.fnDraw();
//oTables.fnReloadAjax();
});
回答by Larry Lustig
oTableis a local variable reference to the datatable that is not valid outside the document ready function.
oTable是对数据表的局部变量引用，在文档就绪函数之外无效。
Do this instead:
改为这样做：
$('#click_me').click( function () {
$('.admin_users').dataTable().fnReloadAjax();
} );
回答by PakoAlanis
` This code works for me...
` 这段代码对我有用...
$(document).ready(function(){
var oTable = $('#MyTab').dataTable({....});
$('#btnRefresh').click( function () {
oTable.fnDraw();
} );
}`
回答by Greg Pettit
Scope issues are always tricky. I'm not claiming to be an expert, but this way seems to work fairly consistently for me:
范围问题总是很棘手。我并不是自称是专家，但这种方式对我来说似乎相当一致：
- Create a new object in the global scope.
- All other functions and variables specific to my application reside in this object. The technique is simply namespacing via an object
- Ensure sane ordering of scripts: first jQuery, then any other 3rd-party plugins, then application script(s); call the document ready function (if it is being used) only at the end of all that.
- 在全局范围内创建一个新对象。
- 特定于我的应用程序的所有其他函数和变量都位于此对象中。该技术只是通过对象进行命名空间
- 确保脚本的合理排序：首先是 jQuery，然后是任何其他 3rd-party 插件，然后是应用程序脚本；仅在所有这些结束时调用文档就绪函数（如果正在使用它）。
Example of creating a namespace with an object:
使用对象创建命名空间的示例：
var myApp = myApp || {}; // create it if the variable isn't already being used
myApp.oTable = $('#admin_users').dataTable({ parameters });
myApp.someUtilityFunction = function(foo) { alert(foo) };
As an aside, you can see that I'm using an ID for my dataTable in the above example. A selector is a selector, so yours will work, but it's always going to be a unique table anyhow, so the ID selector is a bit more efficient. I'm also not 100% sure if dataTable() only operates on the first node returned by the selector or not (I hope so!), which is a potential issue.
顺便说一句，您可以看到我在上面的示例中为我的 dataTable 使用了 ID。选择器是一个选择器，所以你的选择器会起作用，但无论如何它总是一个唯一的表，所以 ID 选择器更有效。我也不是 100% 确定 dataTable() 是否只在选择器返回的第一个节点上运行（我希望如此！），这是一个潜在的问题。
With that in place, you could bind your click in the document ready without fear:
有了它，你就可以毫无顾虑地在文档中绑定你的点击：
$(function() {
$('#click_me').click( function () {
myApp.oTable.fnReloadAjax(); // if script is available
});
});
As an additional aside, if #click_me is ever in danger of being destroyed (for example, being inside the table that's being redrawn!) you would be better off using .delegate() (jQuery 1.6.x) or .on() (1.7 and beyond)
另外，如果#click_me 有被破坏的危险（例如，在正在重绘的表中！）你最好使用 .delegate() (jQuery 1.6.x) 或 .on() ( 1.7 及更高版本）
回答by critic
oTable is a local variable reference to the datatable that is not valid outside the document ready function.
oTable 是对数据表的局部变量引用，在文档就绪函数之外无效。
Yes, you can.
是的你可以。
var oTable;
$(document).ready(function() {
oTable = $('.admin_users').dataTable({
});
});
$('[name=insert]').live('click', function(){
$DT.RowInsert(this);
oTable.fnReloadAjax();
return false;
});
回答by Harsh Sanghani
You can reload data table using ajax.reload method of datatable, Please try these.
您可以使用数据表的ajax.reload方法重新加载数据表，请尝试这些。
$('#click_me').click( function () {
oTable.ajax.reload();
});
回答by Vaimeo
if you just want to reload data to get latest record just call click event on key coumn
如果您只想重新加载数据以获取最新记录，只需在关键参数上调用单击事件
- $("#tableToCallEvent").find('.sorting').eq(0).click();
you can change the value of eq(0) where 0 is the index of first column of tbody inside table
您可以更改 eq(0) 的值，其中 0 是表内 tbody 第一列的索引
Simple and easy :)
简单易行:)
