代码之家 › 专栏 › 技术社区 › Sajjan Sarkar

使用ReactJS时不应用Datatables引导主题

themes requirejs datatables jquery javascript

Sajjan Sarkar · 技术社区 · 8 年前

下面是我的HTML和JS的链接,如果你运行它,你会看到 datatable已正确初始化

与问题的联系:

https://jsfiddle.net/sajjansarkar/c2f7s2jz/2/

我做错了什么?

以下是我的JS(以防小提琴不起作用):

requirejs.config({
  paths: {
    'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery',
    'bootstrap': 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min',
    'datatables': 'https://cdn.datatables.net/v/bs/dt-1.10.12/b-1.2.2/b-colvis-1.2.2/b-html5-1.2.2/cr-1.3.2/fh-3.1.2/kt-2.1.3/r-2.1.0/sc-1.4.2/se-1.2.0/datatables.min',

  },
  shim: {
    'bootstrap': {
      deps: ['jquery']
    },
    'datatables': ['jquery', 'bootstrap'],

  }
});


require([
  'jquery',
  'bootstrap', , 'datatables'
], function($, Bootstrap, datatables) {
  'use strict';

  $('#example').dataTable();
});

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.12/b-1.2.2/b-colvis-1.2.2/b-html5-1.2.2/cr-1.3.2/fh-3.1.2/kt-2.1.3/r-2.1.0/sc-1.4.2/se-1.2.0/datatables.min.css" />
</head>
<body>
<table id="example" class="table table-striped table-bordered table-hover table-condensed dt-responsive data-table" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>

 <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
...
</tbody></table>

</body>

1 回复 | 直到 8 年前

Community Mohan Dere 5 年前

file 您用于 datatables paths 看起来它包含一堆连接在一起的匿名AMD模块。匿名模块是指 define require 呼叫 定义 必须而且呼叫该文件可能对不使用任何模块加载器的人有用,但您不能将其用于RequireJS。

所以你必须单独设置 数据表 datatables.bootstrap .
你的 shim 数据表 电话 定义 垫片 仅适用于 .
如果要对数据表使用引导样式,则必须加载 datatables.bootstrap
将尝试加载 datatables.net 数据表 。您需要参考 datatables.net 随处可见,或者您可以使用 map 就像我在下面做的那样。

requirejs.config({
  paths: {
    'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery',
    'bootstrap': 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min',
    'datatables': 'https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min',
    'datatables.bootstrap': 'https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min',
  },
  shim: {
    'bootstrap': {
      deps: ['jquery']
    },
  },
  map: {
    '*': {
      'datatables.net': 'datatables',
    }
  },
});


require(['jquery', 'datatables.bootstrap'], function($) {
  'use strict';

  $('#example').dataTable();
});

这是叉子 fiddle