Я получаю ошибку
__ 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>
Моя ошибка
Может кто-нибудь помочь мне, почему эта ошибка произошла.Спасибо.