JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.9.4/js/jquery.dataTables.min.js"></script>
<body>
<div id="myform">
<input type="checkbox" id="selectall" /><label for="selectall">Select all</label>
| Search <input type="text" value="" id="dtSearch">
<table id="mytable"></table>
</div>
JavaScript
var myList = function () {
var dtTable;
var init = function (){
dtTable = $('#mytable').dataTable({
"aaData": [
["1", "name1", "[email protected]", "United States"],
["2", "name2", "[email protected]", "Spain"],
["3", "name3", "[email protected]", "Spain"],
["4", "name4", "[email protected]", "United States"],
["5", "name5", "[email protected]", "Spain"],
["6", "name6", "[email protected]", "Spain"]
],
"iDisplayLength": 3,
"aoColumns": [
{ "sTitle": "", "bVisible": true, sWidth: "10%", "mRender": renderCheckBox },
{ "sTitle": "", "bVisible": true, sWidth: "25%" },
{ "sTitle": "", "bVisible": true, sWidth: "25%" },
{ "sTitle": "", "bVisible": true, sWidth: "40%" }
],
"bInfo": false,
"bLengthChange": false,
"sDom": "trp"
});
$('#dtSearch').on('keyup', dtFilter)
$('#myform').on('click', '#selectall', selectAll);
};
var dtFilter = function () {
dtTable.fnFilter($('#dtSearch').val());
};
var renderCheckBox = function (data, type, full) {
return '<input type="checkbox" value="' + full[0] + '" id="c' + full[0] + '"/>';
};
var selectAll = function () {
var checked = $('#selectall').prop('checked');
// get all filtered rows
var filteredRows = $(dtTable).dataTable()._('tr', { "filter": "applied" });
filteredRows.forEach(function (row) {
$('#mytable input[value="' + row[0] + '"]').prop('checked', checked);
});
};
return {
Init : init
};
...