JSFiddle - React, Tailwind, and code Playground

by BenjaminRay

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<DIV id="tablePanel">
    <table class="userTable" cellpadding="4" rules="all" border="1" id="users">
        <THEAD>
            <TR>
                <th>
                    <input type="checkbox" id="check_all" class="call-checkbox" name="check_all" onclick="javascript:checkAll();" />Select users</th>
                <th>User Id</th>
                <th>Full Name</th>
            </TR>
        </THEAD>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" id="check1" class="call-checkbox" name="check1" />User 1</td>
                <<td>User 1 ID</td>
                    <td>User 1 full name</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" id="check2" class="call-checkbox" name="check2" />User 2</td>
                <<td>User 2 ID</td>
                    <td>User 2 full name</td>
            </tr>
        </tbody>
    </table>
</DIV>

JavaScript

function checkAll() {
    var oTable = $('#users').dataTable();
    var oSettings = oTable.fnSettings();
    for (var i = 0; i < oSettings.aiDisplay.length; i++) {
        // doesn't work in 1.10.5,  put a check on the checkbox for each row
        $('input', oTable.fnGetNodes(oSettings.aiDisplay[i])).attr('checked', this.checked);

        if (this.checked == true) {
            $(oTable.fnGetNodes(oSettings.aiDisplay[i])).addClass('row_selected');
        } else {
            $(oTable.fnGetNodes(oSettings.aiDisplay[i])).removeClass('row_selected');
        }
    }
}

$(function () {
    var dTable = $('#users').DataTable();
    dTable.data().each(function () {
        
    });
});