DataTables未在RequireJS項目中正確初始化

Question

我正在使用jQuery DataTables插件來處理使用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();
});

由於加載HTML是異步發生的，因此不需要datatables-js.js文件。 我希望這可以幫助其他類似項目的人。

Answer 2

在RequireJs配置中嘗試這個

"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 ，更改$('#example').dataTable(); to $('#example').DataTable(); ，有資本D.

另外，更改第一行：

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

對此：

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

另外，不要使用空JSON對象初始化DataTables。 更改：

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

對此：

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