I am using datatable in react. When i click on sorting (in tHead) it removes all data and says no data available in table
What i think here, is that tbody is being rendered before Datatable initialisation. Or something like that.
Here is my code in PasteBin
And here is some code of componentDidMount
componentDidMount(){
employessData = thisclass.props.data;
thisclass.setState({
stateReady: true
})
var self = this;
$('#mytableEmp').dataTable({
"columnDefs": [
{ "width": "20px", "targets": 0 }
],
"pagingType": "numbers",
"bAutoWidth": false,
"bDestroy": true,
"fnDrawCallback": function() {
self.forceUpdate();
}
});
$('#checkboxhead').removeAttr('area-sort').removeClass('sorting_asc');
$(".checkAllCBEmp").click(function () {
$('#mytableEmp tbody input[type="checkbox"]').prop('checked', this.checked);
});
$("#searchtabletb").on("keyup", function() {
var value = $(this).val();
value = value.toLowerCase();
console.log(value);
$("#mytableEmp tr").each(function(index) {
if (index != 0) {
var row = $(this);
var id = row.find("td").text();
id = id.toLowerCase();
if (id.indexOf(value) === -1) {
$(this).hide();
}
else {
$(this).show();
}
}
});
});
}
And here is code from render function.
render () {
return (
<table className="table table-stripped" id="mytableEmp">
<thead>
<tr className="table-head-row">
<th id="checkboxhead" className="firsttd">
<div className="round-cb">
<input type="checkbox" id="cb1_emp" className="checkAllCBEmp" />
<label htmlFor="cb1_emp"></label>
</div>
</th>
<th>Title</th>
<th>Type</th>
<th>Created on</th>
<th>From</th>
<th>To</th>
<th>Processed</th>
<th>Amount</th>
<th>Status</th>
<th id="detailarrowhead" className="lasttd"></th>
</tr>
</thead>
<tbody>
{
this.state.stateReady ?
employessData.map((heading, index) => {
return(<tr role="row" className="tablerow" key={index}>
<td className="firsttd">
<div className="round-cb">
<input type="checkbox" value="cb1" id={heading.userId} />
<label htmlFor={heading.userId}></label>
</div>
</td>
<td>
<div className="emp-avatar">
<img src={heading.profile_picture} />
</div>
<div className="emp-title-div">
<div className="emp-title">
<div>
{heading.name}
</div>
</div>
</div>
</td>
<td>c</td>
<td>Texto 2</td>
<td>Texto 2</td>
<td>Texto 2</td>
<td>Texto 2</td>
<td>Texto 2</td>
<td><span className="badge badge-red">Rejected</span></td>
<td className="lasttd"><Link to="/emp-profile" className="table-details-btn" onClick={() => {this.addlocalid(heading.userId)}}>View User</Link></td>
</tr>)
})
:
""
}
/tbody>
</table>
)
}