JSFiddle - React, Tailwind, and code Playground

by brogers

HTML

<script src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<body>
    <form >    
    <fieldset>
        <div>
                <h1> Task for assignedPSUser: <span style="color: #efa53a;font-weight:bold; ">jsmith</span></h1>
            <input type="button"  id="checkAllButton" class="checkAllButton" value="check all" />
            <table id="example" class="tablesorter" style="width: 500px">
                <thead>
                    <tr>
                        <td class="filter"></td>
                        <td class="filter"></td>
                        <td class="filter"></td>
                        <td class="filter"></td>
                        <td class="filter"></td>
                        <td class="filter"></td>
                        <td class="filter"></td>
                        <td class="filter"></td>
                        <td class="filter"></td>
                    </tr>
                    <tr>
                        <th scope="col">Reassign</th>
                        <th scope="col">CVSID</th>
                        <th scope="col">TaskID</th>
                        <th scope="col">Short Description</th>
                        
                        <th scope="col">Section Cd</th>
                        <th scope="col">Task Type</th>
                        <th scope="col">Create Date</th>
                        <th scope="col">assigned PS User</th>
                        <th scope="col">assign User ID</th>
                    </tr>

                </thead>

                <tfoot>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
            </tfoot>
                <tbody>

                        <tr>

                            <td...

JavaScript

$('.checkAllButton').click(function () {
            if ('check all' == $(this).val()) {
                $('input:checkbox').prop('checked', true);
                $(this).val('uncheck all');
            } else {
                $('input:checkbox').prop('checked', false);
                $(this).val('check all');
            }
        });


        


        /* Initialise the DataTable */
        var oTable = $('#example').dataTable({
            "aoColumns": [
                { "sWidth": "10%" },
                { "sWidth": "10%" },
                { "sWidth": "10%" },
                { "sWidth": "10%" },
                { "sWidth": "10%" },
                { "sWidth": "10%" },
                { "sWidth": "10%" },
                { "sWidth": "10%" },
                { "sWidth": "10%" }
            ],
            "oLanguage": {
                "sSearch": "Search all columns:"
            },
            "bAutoWidth": true, "pagingType": "full_numbers"
        });


        /* Add a select menu for each TH element in the table footer */
        $("tr td.filter").each(function (i) {
            if (i > 0) {
                this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i));
                $('select', this).change(function () {
                    oTable.fnFilter($(this).val(), i);
                });
            }
        });

        $('#btnUpdateTasks').on('click', function (e) {
            e.preventDefault();
            
            //Get The New User
            var newUser = $('#assignedPSUser').val();

            if ($('#assignedPSUser').val().length == 0) {
                alert("Please select a new assignUserID.");
                return;
            }

            //Get the Tasks to reassign
            var taskListArray = [];

            $('input:checked').each(function () {
                taskListArray.push($(this).attr("data-taskId"));
            });
            if (taskListArray.length == 0) {
                alert("Please check at least...