I am trying to create a DOM datatable for my project. Automatic reload needed for this datatable. Reload available in Ajax datatable. But DOM function not available. So I selected DOM datatable. But auto reload function is not available in DOM datatable. I thinked a solution for it. Finally I got an idea.
jQuery autoclick on <th> with specific interwell will be the solution for it.
Eg: <th class="autoclick">.
Datatable is sorting content by default as ascending.
First autolick will make content as descending. Second autoclick will make content again as ascending. Third auto click will make content again as descending. Fourth autoclick will make content again as ascending. It will repeat always 24/4.
Ascending to Descending autoclick interwell (First autoclick)= 45 seconds. (first autoclick will be after 45 seconds of page load.) Descending to Ascending autoclick interwell (Second autoclick)= 25 seconds. After this 25 seconds again making autoclick. Again after 45 seconds. It will repeat always 24/7 .. etc.....
Is it possible? Please help me...
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th class="autoclick">Points</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="99"></td>
<td><input type="text" value="55"></td>
<td><input type="text" value="45"></td>
<td><input type="text" value="75"></td>
</tr>
<tr>
<td><input type="text" value="89"></td>
<td><input type="text" value="72"></td>
<td><input type="text" value="79"></td>
<td><input type="text" value="39"></td>
</tr>
<tr>
<td><input type="text" value="97"></td>
<td><input type="text" value="12"></td>
<td><input type="text" value="25"></td>
<td><input type="text" value="19"></td>
</tr>
<tr>
<td><input type="text" value="22"></td>
<td><input type="text" value="32"></td>
<td><input type="text" value="19"></td>
<td><input type="text" value="43"></td>
</tr>
<tr>
<td><input type="text" value="49"></td>
<td><input type="text" value="18"></td>
<td><input type="text" value="63"></td>
<td><input type="text" value="74"></td>
</tr>
<tr>
<td><input type="text" value="37"></td>
<td><input type="text" value="49"></td>
<td><input type="text" value="58"></td>
<td><input type="text" value="37"></td>
</tr>
<tr>
<td><input type="text" value="28"></td>
<td><input type="text" value="19"></td>
<td><input type="text" value="67"></td>
<td><input type="text" value="47"></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
</tr>
</tfoot>
</table>
<script type="">
$.fn.dataTable.ext.order['dom-text-numeric'] = function (settings, col) {
return this.api()
.column(col, { order: 'index' })
.nodes()
.map(function (td, i) {
return $('input', td).val() * 1;
});
};
$(document).ready(function () {
$('#example').DataTable({
order: [[2, 'asc']],
columns: [
{ orderDataType: 'dom-text-numeric' },
{ orderDataType: 'dom-text-numeric' },
{ orderDataType: 'dom-text-numeric' },
{ orderDataType: 'dom-text-numeric' },
],
});
});
</script>