DataTables在RequireJS项目中无法正确初始化

Question

我正在为一个使用 RequireJS 的项目使用 jQuery DataTables 插件。我已经将 DataTables 库和初始化脚本加载到 RequireJS 的 app.js 脚本中，并在模板文件中的表格中添加了适当的元素 ID。然而，DataTables 无法初始化。看起来，DataTables 和 RequireJS 不太兼容。在控制台中没有看到与下面代码相关的任何错误消息，但它仍无法按预期工作。

这是我的初始化脚本：

require(["datatables.net"], function() {
$(function() {
// initialize DataTables
$("#example").DataTable({
});
});
});

这是我的RequireJS配置:

requirejs.config({
config: {
    //Set the config for the i18n
    //module ID
    i18n: {
        // Change this to en-us to use the strings in nls/en-us for example
        locale: 'en-gb'
    }
},
// "urlArgs": "ts=" + new Date().getTime(), // disable caching - remove in production
"baseUrl": "js/lib",
"paths": {
    "app":                       "../app",
    "jquery":                    "../lib/jquery-2-0-0.min",
    "bootstrap":                 "../lib/bootstrap.min",
    "backbone":                  "../lib/backbone-min",
    "underscore":                "../lib/underscore-min",
    "text":                      "../lib/text.min",
    "store":                     "../lib/store.min",
    "loader":                    "../lib/spin.min",
    "jquery-insertAtCaret":      "../lib/jquery-insertAtCaret",
    "splash-clearAndResetModal": "../lib/splash/clearAndResetModal",
    "splash-utils":              "../lib/splash/utils",
    "splash-proofhq":            "../lib/splash/proofhq",
    "splash-config":             "../config",
    "datatables.net":                "//cdn.datatables.net/1.10.10/js/jquery.dataTables.min",
    "datatables-js":             "../lib/datatables-js"
},
wrapShim: false,
// Add dependancies to the libs
shim: {
    // "enc-base64": {
    //     deps: ["sha256", "hmac-sha256"]
    // }
}
});

- Liz

---

在初始化之前，您是否检查过jQuery是否正确加载？ - Steven B.

嗨@lamelemon - 是的，jQuery正在正确加载。 - Liz

你尝试过去掉“new”吗？ - ian

@NickyTheWrench 当我切换到 datatables.net 时，出现了这个错误：require.js:19 TypeError: $(...).dataTable is not a function(…) - Liz

你在 requirejs() 调用中是否也将 "datatables" 更改为 "datatables.net"？ - ian

Answer 1

我终于成功了，Allan来自DataTables帮助了我。

基本上，问题出在......DataTables初始化代码本身没有任何问题（听起来很奇怪）。

它在运行，但在运行时，表格还没有被放入文档中。 #example 选择器找不到任何元素，因此什么也没发生。然后在 admin.js 中的模板代码启动并将表格放入DOM中 - 但发生得太晚了！

需要改变的是在HTML表格放入DOM之后初始化DataTable。这是在admin.js中的done方法：

.done(function() {
$('#js-loading-state').remove();
$('#example').DataTable();
});

datatables-js.js文件不是必需的，因为HTML的加载是异步进行的。我希望这能帮助到其他类似项目的人。

- Liz

Answer 2

尝试在RequireJs配置中使用这个。

"datatables.net":"..libs/datatables/js/jquery.dataTables",

或者尝试这个

  "dataTables": "http://datatables.net/download/build/nightly/jquery.dataTables",

- shahid khan

---

这个不起作用。我收到了一个错误：require.js:19 TypeError: $(...).DataTable不是一个函数(…) - Liz

尝试使用datatables.net代替"dataTables"。 - shahid khan

那还是不行。此时，我不认为更新名称会有任何好处。我已经尝试了许多名称的迭代，但都没有帮助我初始化数据表。 - Liz

#example 中到底是什么？ - shahid khan

我能看到模板文件吗？ - shahid khan

https://github.com/erbanach/translation-system 模板文件是 public-static/templates/admin.html。 - Liz

Answer 3

在 https://github.com/erbanach/translation-system/blob/master/public-static/js/lib/datatables-js.js 中，将 $('#example').dataTable(); 更改为 $('#example').DataTable();，D 大写。

另外，更改第一行：

require(["jquery", "datatables"], function() {

转换为：

require(["jquery", "datatables"], function($) {

此外，不要使用空的 JSON 对象来初始化 DataTables。请更改为：

$("#example").DataTable({});

转换为这个：

$("#example").DataTable();

- charmeleon

---

@LizBanach，你能试一下我的修改吗（在同一个文件中的匿名函数中添加“$”）？抱歉，我没有开发机器的访问权限，所以我是盲目调试。 - charmeleon

谢谢你的帮助。我现在遇到了一个新的错误：由datatables-js.js引起的Uncaught SyntaxError: Unexpected token <。你有什么想法是什么原因导致这个问题？我的更新代码已经在repo中可用，看起来像这样：require（["jquery"，"datatables"]，function（$）{ $（function（）{ //初始化DataTables $（“#example”）。DataTable（{}）; }）; }）; - Liz

@LizBanach 在你的 DataTable 初始化中删除空括号。将 $("#example").DataTable({}); 更改为 $("#example").DataTable();。 - charmeleon

我仍然收到这个控制台错误：datatables-js.js:1 Uncaught SyntaxError: Unexpected token < - Liz