使用 ReactJS 时数据表 Bootstrap 主题不适用 [英] Datatables Bootstrap theme not applying when using ReactJS

查看：12
本文介绍了使用 ReactJS 时数据表 Bootstrap 主题不适用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是 RequireJS 的新手，所以请保持温和！

下面是我的 HTML 和 JS 的链接，如果您运行它，您将看到数据表已正确初始化，但它没有应用引导程序主题.

有问题的链接:

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

我做错了什么?

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

requirejs.config({路径:{'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery','bootstrap': 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min','数据表':'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',},垫片:{'引导':{deps: ['jquery']},'数据表': ['jquery', 'bootstrap'],}});要求(['jquery','引导程序', , '数据表']，函数($，Bootstrap，数据表){'使用严格';$('#example').dataTable();});

HTML:

<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"/><身体><table id="example" class="table table-striped table-bordered table-hover table-condensed dt-responsive data-table" cellspacing="0" width="100%"><头><tr><th>姓名</th><th>位置</th><th>办公室</th><th>年龄</th><th>开始日期</th><th>薪水</th></tr></thead><tr><td>老虎尼克松</td><td>系统架构师</td><td>爱丁堡</td><td>61</td><td>2011/04/25</td><td>$320,800</td></tr>...</tbody></table>

解决方案

您尝试执行的操作存在许多问题:

  1. file 看起来像是包含一堆连接在一起的匿名 AMD 模块.匿名模块是 define 调用未设置模块名称的模块.这些模块从启动它们的加载的 require 调用中获取它们的模块名称.你不能仅仅连接匿名模块来制作一个包.对define的调用必须也改变以添加模块名称作为第一个参数define 调用.该文件可能对不使用任何模块加载器的人有用，但您不能将它与 RequireJS 一起使用.

    所以你必须为datatables 和datatables.bootstrap 设置单独的paths.

  2. datatables 的 shim 没用，因为 datatables 调用了 define 和 shim 仅用于不调用 define 的文件.

  3. 如果您想对数据表使用 Bootstrap 样式，那么您必须以一种或另一种方式加载 datatables.bootstrap.您目前没有这样做.(即使您加载的包已修复为与 RequireJS 一起使用，您也必须在某处显式请求 datatables.bootstrap.)

  4. datatables.bootstrap 将尝试加载 datatables.net 而不是 datatables.您需要在任何地方将 datatables 称为 datatables.net 或者您可以像我下面那样使用 map.

如果我将您的 JavaScript 修改为这样，我会得到正确的结果:

requirejs.config({路径:{'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery','bootstrap': 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min','数据表':'https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min','datatables.bootstrap': 'https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min',},垫片:{'引导':{deps: ['jquery']},},地图: {'*':{'datatables.net': '数据表',}},});要求(['jquery'，'datatables.bootstrap']，函数($){'使用严格';$('#example').dataTable();});

这是一个分叉的fiddle.

I am fairly new to RequireJS, so please be gentle!

Below is a link with my HTML and JS and if you run it you will see that the datatable is initialized correctly but it is not applying the bootstrap theme.

Link with problem:

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

What am I doing wrong?

Below is my JS (in case the fiddle doesnt work):

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();
});

HTML:

<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>

解决方案

There is a number of problems with what you are trying to do:

  1. The file you use for datatables in paths looks like it contains a bunch of anonymous AMD modules concatenated together. An anonymous module is a module for which the define call does not set the module name. Such modules get their module name from the require call that initiated their loading. You cannot just concatenate anonymous modules to make a bundle. The calls to define must also be changed to add the module name as the first argument to the define call. That file may be useful for people who do not use any module loader, but you cannot use it with RequireJS.

    So you have to setup separate paths for datatables and datatables.bootstrap.

  2. Your shim for datatables is useless because datatables calls define and shim is only for files that do not call define.

  3. If you want to use the Bootstrap stylings for Datatables, then you must load datatables.bootstrap one way or another. You currently do not do that. (Even if the bundle you load was fixed to work with RequireJS, you'd have to explicitly request datatables.bootstrap somewhere.)

  4. datatables.bootstrap will try to load datatables.net rather than datatables. You need to refer to datatables as datatables.net everywhere or you can use a map like I do below.

I get proper results if I modify your JavaScript to this:

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();
});

Here's a forked fiddle.

这篇关于使用 ReactJS 时数据表 Bootstrap 主题不适用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆