我收到错误
__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>
我的错误
任何人都可以帮我解释为什么会出现此错误。 谢谢。
最佳答案
只需添加
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/