How can I select and deselect the datatable row

polachan

How can I select and deselect the datatable row , I given the code is as follows still not working

 <table id="tblClockVariance" class="table table-bordered table-striped" style="width:100%;font-size:90%">
                        <thead class="thead-light">
                            <tr>
                                <th> Employee</th>
                                <th> Date</th>
                                <th>Clocked In</th>
                                <th>Clocked Out</th>
                                <th>NetHrs Clocked</th>
                                <th>Due Hrs<br />Less Break<br /></th>
                                <th>Break Hrs</th>
                                <th>Variance Hrs</th>
                                <th>Cum.Variance</th>
                                <th>Normal Hrs</th>
                                <th>Holiday Hrs</th>
                                <th>Sick Hrs</th>
                                <th>Dayoff Hrs</th>
                                <th>Maternity Hrs</th>
                                <th>Time Off Hrs</th>
                                <th>Maternity Hrs</th>
                            </tr>

                        </thead>
                        <tbody>
                            <tr>
                                <td>EmployeeName</td>
                                <td>calDate</td>
                                <td>ClockIN</td>
                                <td>ClockedOut</td>
                                <td>NetClockedHrs</td>
                                <td>DueHrs</td>
                                <td>BreakHrs</td>
                                <td>VarianceHrs</td>
                                <td>CumVarianceHrs</td>
                                <td>NormalHrs</td>
                                <td>HolidayHrs</td>
                                <td>SickHrs</td>
                                <td>DayoffHrs</td>
                                <td>MaternityHrs</td>
                                <td>TimeOffHrs</td>
                                <td>MaternityHrs</td>
                            </tr>
                        </tbody>

                    </table>




$('#tblClockVariance').DataTable({
            "processing": true,
            //"serverSide": true,

            "ajax": {
                "url": "/Report/ClockingVarianceData",
                "data":  report,
                 "dataSrc": function (json) {
                    return JSON.parse(json);
                }
            },
            "columns": [
                { "data": "EmployeeName" },
                { "data": "FromDate" },
                { "data": "ClockedIn" },
                { "data": "ClockedOut" },
                { "data": "NetClockedHrs" },
                { "data": "DueHrs" },
                { "data": "BreakHrs" },
                { "data": "VarianceHrs" },
                { "data": "CumVarianceHrs"},
                { "data": "NormalHrs" },
                { "data": "HolidayHrs" },
                { "data": "SickHrs" },
                { "data": "DayoffHrs" },
                { "data": "MaternityHrs" },
                { "data": "TimeOffHrs" },
                { "data": "ExtraTimeHrs" }

                

            ],
            "pageLength": 40,
            scrollY: "300px",
            scrollX: true,
            paging: false,
            dom: 'Bfrtip',
            buttons: [
                'copy',
                'csv',
                'excel',
                'pdf'


            ]
           
            // scroller: true
        });
// The selection is not working 
        $('#tblClockVariance tbody').on('click', 'tr', function () {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
            }
            else {
                table.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
            }


        });

colin

Hi @polachan ,

The Select extension will do this - it would be worth looking at that. If not, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin