RequireJS - $(...).DataTable 不是函数答案

【问题标题】：RequireJS - $(...).DataTable is not a functionRequireJS - $(...).DataTable 不是函数
【发布时间】：2015-08-19 16:01:08
【问题描述】：

我在让 jQuery DataTables 工作时遇到了很多麻烦。我一直在寻找很多地方，但似乎无法深入了解它。

我通过 Chrome 开发者工具收到的错误是：

$(...).DataTable 不是函数

app.js：

requirejs.config({
    "baseUrl": "../Scripts",
    "paths": {
        app: "./app",
        essentials: "./dist/essentials.min",
        jquery: "./dist/jquery-1.10.2.min",
        "jquery.bootstrap": "./dist/bootstrap.min"
        "jquery.dataTables": "./dist/jquery.dataTables.min",
        "jquery.dataTables.bootstrap": "./dist/jquery.dataTables.bootstrap.min"

    },
    "shim": {
        "essentials": ["jquery"],
        "jquery.dataTables": ["jquery"],
        "jquery.dataTables.bootstrap": ["jquery.dataTables"],
        "jquery.bootstrap": ["jquery"]
    }
});

// Load the main app module to start the app
requirejs(["app/main"]);

main.js（未使用）：

require(["jquery"], function ($) {
    $(function () {
    });
});

Create.js（从 TypeScript 生成）：

define(["require", "exports", "../../Shared/ModalHelper"], function (require, exports, Helper) {
    require(["jquery", "essentials", "jquery.bootstrap", "jquery.dataTables", "jquery.dataTables.bootstrap"], function ($) {
        function initilializeTables() {
            var attrSelectDataTable = $('#selectAttrsTable').DataTable({
                paging: true,
                bInfo: true,
                "columnDefs": [
                    { "orderable": false, "targets": 0 }
                ],
                scrollY: 400
            });
            var attrPreviewDataTable = $('#selectedAttrsTable').DataTable({
                paging: true,
                bInfo: true,
                "columnDefs": [
                    { "orderable": false, "targets": 0 },
                    { "orderable": false, "targets": 5 }
                ],
                scrollY: 400
            });

        }

        initilializeTables();

    });
});

【问题讨论】：

标签： javascript requirejs datatables

【解决方案1】：

由于 DataTables 将自己声明为命名模块，因此在 require config 中声明路径名称时必须使用“datatables”名称。

在这里直播example。感谢here。

【讨论】：

【解决方案2】：

错误的原因很可能是：

缺少 jQuery 库 (./dist/jquery-1.10.2.min.js)

或
缺少 jQuery DataTables 插件 (./dist/jquery.dataTables.min.js)

或
jQuery DataTables 版本为 1.9.x 或以下。 jquery.dataTables.min.js 的第一行应该包含插件版本。

方法 DataTable() 仅在 jQuery DataTables 1.10 中可用。

【讨论】：