个人中心
gpt4 book ai didi

javascript - DataTable 不是函数时出现错误

转载 作者：行者123 更新时间：2023-12-03 01:46:42 25 4
gpt4 key购买 nike

我收到错误

__WEBPACK_IMPORTED_MODULE_1_jquery___default(...)(...).DataTable is not a function

我不明白为什么会出现这个错误，因为我是新手。

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

    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>

我的错误

error image

任何人都可以帮我解释为什么会出现此错误。谢谢。

最佳答案

只需添加

import DataTable from 'datatables.net';

之后

import $ from 'jquery';

在您的 Global.js 文件上

所以前三行是:

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

关于javascript - DataTable 不是函数时出现错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50601385/

25 4 0
文章推荐： javascript - react 最终形式我只想在所有字段都有效的情况下处理提交
文章推荐： elasticsearch - Elasticsearch MultiMatch查询仅匹配最后一项
文章推荐： audio - 视频开始时的JavaFX音频 “BUZZ”
文章推荐： javascript - 将 JavaScript 函数值转发到 C#
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com