Question

我收到错误

__ WEBPACK_IMPORTED_MODULE_1_jquery ___ default（...）（...）。DataTable是不是一个功能

我无法理解为什么会出现这个错误，因为我是新手。

这是我的Global.js文件，我写了jQuery代码。

    import React, { Component } from 'react';
    import $ from 'jquery';


    function filterGlobal () {
        $('#example').DataTable().search(
            $('#global_filter').val(),
            $('#global_regex').prop('checked'),
            $('#global_smart').prop('checked')
        ).draw();
    }


    $(document).ready(function() {
        $('#example').DataTable();

        $('input.global_filter').on( 'keyup click', function () {
            filterGlobal();
        } );

    } );


    class Global extends React.Component {
      constructor(props) {
        super(props);
      };


      render() {
        return (
          <div>
            <table cellPadding={3} cellSpacing={0} border={0} style={{width: '67%', margin: '0 auto 2em auto'}}>
              <thead>
                <tr>
                  <th>Target</th>
                  <th>Search text</th>
                </tr>
              </thead>
              <tbody>
                <tr id="filter_global">
                  <td>Global search</td>
                  <td align="center"><input type="text" className="global_filter" id="global_filter" /></td>
                  <td align="center"><input type="checkbox" className="global_filter" id="global_regex" /></td>
                  <td align="center"><input type="checkbox" className="global_filter" id="global_smart" defaultChecked="checked" /></td>
                </tr>
              </tbody>
            </table><table id="example" className="display" style={{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>
                <tr>
                  <td>Shad Decker</td>
                  <td>Regional Director</td>
                  <td>Edinburgh</td>
                  <td>51</td>
                  <td>2008/11/13</td>
                  <td>$183,000</td>
                </tr>
                <tr>
                  <td>Michael Bruce</td>
                  <td>Javascript Developer</td>
                  <td>Singapore</td>
                  <td>29</td>
                  <td>2011/06/27</td>
                  <td>$183,000</td>
                </tr>
                <tr>
                  <td>Donna Snider</td>
                  <td>Customer Support</td>
                  <td>New York</td>
                  <td>27</td>
                  <td>2011/01/25</td>
                  <td>$112,000</td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <th>Name</th>
                  <th>Position</th>
                  <th>Office</th>
                  <th>Age</th>
                  <th>Start date</th>
                  <th>Salary</th>
                </tr>
              </tfoot>
            </table>
          </div>

        );
      }
    }

    export default Global;


<!-- end snippet -->

这是我的index.html文件，其中放置了我的css和javascripts链接和脚本。我保留了一些jQuery脚本，那些脚本中有任何错误。

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">
    <link rel="stylesheet" href="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table-all.min.css">
    <link rel="stylesheet" href="/css/custom.css">
    <link rel="stylesheet" href="selectbox.min.css">
    <title>React App</title>
  </head>
  <body >
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
    <script src="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.min.js" />   
    <script src="/js/validation.js"></script>
    <script src="selectbox.min.js"></script>
  </body>
</html>

我的错误

任何人都可以帮我解决这个错误的原因。谢谢。

Answer 1

添加

import DataTable from 'datatables.net';

之后

import $ from 'jquery';

在Global.js文件上

所以前三行将是：

import React, { Component } from 'react';
import $ from 'jquery';
import DataTable from 'datatables.net';

Answer 2

首先请参考下面的网站来安装数据表。那是

npm install datatables.net

https://www.npmjs.com/package/datatables.net

然后确保这些内容在组件文件中。

import $ from "jquery"
import DataTable from 'datatables.net';

这些都在您的public / index.html文件中

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css"
/>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">

错误，DataTable不是一个函数

2 个答案: