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。这是done中的admin.js方法：

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

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

Answer 2

在RequireJs config中尝试此操作

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

或试试这个

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

Answer 3

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

另外，更改第一行：

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

到此：

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

另外，不要使用空的JSON对象初始化DataTables。变化：

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

对此：

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

DataTables未在RequireJS项目

3 个答案: