Using DataTables with react
Question
I am very new to React and I am trying to use DataTables with table which I create in render(). So far my code looks like this- searchForm.js:
componentDidMount() {
$(this.refs.table).DataTable({});
}
render() {
var headerComponents = this.generateHeaders(),
rowComponents = this.generateRows();
return (
<div>
<form onSubmit={this.handleSubmit}>
<input className="resizedTextbox" type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="Enter Material to search"/>
<br />
<br />
<input className="btn btn-primary" type="submit" value="Search" />
<button type="button" className="btn btn-primary" onClick={this.resetSearch}>Reset</button>
</form>
<br />
<div className="table-responsive">
<table ref="table" className="table">
<thead> {headerComponents} </thead>
<tbody> {rowComponents} </tbody>
</table>
</div>
</div>
);
}
Index.html:
<!DOCTYPE html>
<html>
<body>
<header style="background-color: #990000;margin-top: 0;position: relative;top: -10px;">
<h1 style="margin-top: 0;color: white;padding: 10px;">DMFT Search</h1>
</header>
<div align="center" >
<div id="main"></div>
</div>
<div id="search"></div>
<!-- scripts -->
<script src="{{ url_for('static', filename='bower_components/jquery/dist/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='bower_components/react/react.js') }}"></script>
<script src="{{ url_for('static', filename='bower_components/react/react-dom.min.js') }}"></script>
<script src="{{ url_for('static', filename='scripts/js/searchForm.js') }}"></script>
<script src="{{ url_for('static', filename='bower_components/datatables.net/js/jquery.dataTables.js') }}"></script>
</body>
</html>
The problem is that when I load the index.html, I do not see DataTables working, I get an exception in console :
Uncaught TypeError: $(...).DataTable is not a function
at SearchForm.componentDidMount
Kindly advise if I am doing it the right way. I did not find ant help regarding this.
2 answers
solution1
1 2020-06-03 13:02:31
I know its an old one, But can help anybody else by trying the following.
- Include the datatables js file or cdn link in your public/index.html after jquery file.
Create a js folder in public directory and create a custom.js file with code
$(function() { $("#example").DataTable(); });Create a Table component , and inside componentDidMount or useEffect add this code
const script = document.createElement("script"); script.src = "/js/custom.js"; script.async = true; document.body.appendChild(script);From the Table component return the table with id "example"
<table id="example" className="table table-striped table-bordered"> <thead> <tr> <th>head 1</th> <th>head 2</th> </tr> </thead> <tbody> <tr>Data 1</tr> <tr>Data 2</tr> </tbody> </table>
solution2
0 2017-03-15 03:33:28
Index.html is not processed by react so just use plain strings. Try this:
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/react/react.js"></script>
<script src="bower_components/react/react-dom.min.js"></script>
<script src="scripts/js/searchForm.js"></script>
<script src="bower_components/datatables.net/js/jquery.dataTables.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.