javascript - DataTables 未在 RequireJS 项目中正确初始化

Question

我正在使用 jQuery DataTables plugin对于使用 RequireJS 的项目.我已将 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"]
    // }
}
});

Answer 1

我终于能够让它工作了。 DataTables 的 Allan 帮助了我。

基本上，发生了什么...... DataTables 初始化代码本身没有任何问题(听起来很奇怪)。

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

需要更改的是在 HTML 表位于 DOM 中之后初始化 DataTable。这是 admin.js 中的 done 方法:

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

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