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

2023年10月17日 247次阅读

我正在将
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"]
    // }
}
});

最佳答案 我终于能够让这个工作了. DataTables的Allan帮助了我.

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

它正在运行,但在运行时,表格不在文档中. #example选择器没有找到任何元素,因此没有任何反应.然后admin.js中的模板代码启动并将表放入DOM中 – 但它发生得太晚了！

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

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

由于加载HTML是异步发生的,因此不需要datatables-js.js文件.我希望这可以帮助其他类似项目的人.

点赞