JS Datatable Addclass(selected) and Remove class(selected) working at same time

Question

User-1355965324 posted

Hi

Datatable row selection is perfectly working when  the View is loaded in first time. Then when I change the month  <LogMonth>  , I am calling the function GetBreakDownLog to refill the record for the corresponding selected month   in the datatable. Then  The Data table row  selection and deselection is running at the same time when I call a java script function  and  hence the row is not being selected  from my code given below.

When I change the month I can see both alert is displaying . The  alert("selected") is showed first and then immediate   alert("removed") is showed and the row is not being selected when I change the month or year. Please help how to fix

<label for="lblYear" class="control-label col-sm-1 ">Year</label>
                    <div class="col-sm-3">
                        <input type='text' id="txtYear" asp-for="LogYear" class="form-control disabled" onchange="GetBreakDownLog()" />
                    </div>
                    <label for="lblMonth" class="control-label col-sm-1 ">Month</label>
                    <div class="col-sm-3">
                        <select id="dropdownMonth" class="form-control" asp-for="LogMonth" onchange="GetBreakDownLog()">
                            <option value="1">Jan</option>
                            <option value="2">Feb</option>
                            <option value="3">Mar</option>
                            <option value="4">Apr</option>
                            <option value="5">May</option>
                            <option value="6">Jun</option>
                            <option value="7">Jul</option>
                            <option value="8">Aug</option>
                            <option value="9">Sep</option>
                            <option value="10">Oct</option>
                            <option value="11">Nov</option>
                            <option value="12">Dec</option>
                        </select>
                        <span asp-validation-for="LogMonth" class="text-danger"></span>


                    </div>


<table id="BreakDownLog" class="table table-bordered table-striped" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Employee</th>
                                    <th>Customer</th>
                                    <th>Date Carried</th>
                                    <th>Date Invoiced</th>
                                    <th>Date Logged</th>
                                    <td>Time Job Start</td>
                                    <td>Time Job Finish</td>


                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>LogID</td>
                                    <td>EmployeeName</td>
                                    <td>CustomerCode</td>
                                    <td>DateCarried</td>
                                    <td>DateInvoiced</td>
                                    <td>DateLogged</td>
                                    <td>TimeJobStart</td>
                                    <td>TimeJobFinish</td>
                                </tr>
                            </tbody>
                        </table>






<script type="text/javascript">

    $(document).ready(function () {
        GetBreakDownLog();
    });
  
    function GetBreakDownLog() {
        var report = {};
        report.DepotNo = document.getElementById("dropdownDepot").value
        report.DepartmentID = document.getElementById("dropdownDepartment").value
        report.logyear = document.getElementById("txtYear").value
        report.logmonth = document.getElementById("dropdownMonth").value

        if ($.fn.DataTable.isDataTable('#BreakDownLog')) {
            $('#BreakDownLog').DataTable().destroy();
        }

        //$('#BreakDownLog').DataTable({
            var table = $('#BreakDownLog').DataTable({
            "processing": true,
            "ajax": {
                "url": "/Employee/GetData",
                "data": report,
                "dataSrc": function (json) {
                    return JSON.parse(json);
                }
            },
            "columns": [
                { "data": "LogID"},
                { "data": "EmployeeName" },
                { "data": "CustomerCode" },
                { "data": "DateCarried" },
                { "data": "DateInvoiced" },
                { "data": "DateLogged" },
                { "data": "TimeJobStart" },
                { "data": "TimeJobFinish" }
              
            ],
            "columnDefs": [
                {
                    "targets": [0],
                    "visible": false
                }
                ],
            "pageLength": 40,
            scrollY: "300px",
            scrollX: true,
            paging: true
        });

               
            $('#BreakDownLog tbody').on('click', 'tr', function () {
                alert("test");
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
                alert("removed");
            }
            else {
                
                table.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
                alert("selected");
            }


        });

    }
</script>

Answer 1

User-719153870 posted

Hi polachan,

The reason for why your tr.click will get fired twice is because the click event was added IN the GetBreakDownLog() function.

When the page get loaded, you have already fired the GetBreakDownLog(), and the tr.click event is also get bound already.

After you click the dropdownlist, it fired the GetBreakDownLog() again and the tr.click also get bound again.

To solve your current problem, you will need to move your tr.click bound function out to the document.ready() and before the GetBreakDownLog().

Please refer to below code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css" />
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            var table = $('#BreakDownLog').DataTable();
            $('#BreakDownLog tbody').on('click', 'tr', function () {
                alert("test");
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                    alert("removed");
                }
                else {
                    table.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                    alert("selected");
                }
            });
            GetBreakDownLog();
        });

        function GetBreakDownLog() {
            var report = {};
            //report.DepotNo = document.getElementById("dropdownDepot").value
            //report.DepartmentID = document.getElementById("dropdownDepartment").value
            report.logyear = document.getElementById("txtYear").value
            report.logmonth = document.getElementById("dropdownMonth").value

            if ($.fn.DataTable.isDataTable('#BreakDownLog')) {
                $('#BreakDownLog').DataTable().destroy();
            }

            //$('#BreakDownLog').DataTable({
            var table = $('#BreakDownLog').DataTable({
                "processing": true,
                "ajax": {
                    "url": "/Employee/GetData",
                    "data": report,
                    "dataSrc": function (json) {
                        return JSON.parse(json);
                    }
                },
                "columns": [
                    { "data": "LogID" },
                    { "data": "EmployeeName" },
                    { "data": "CustomerCode" },
                    { "data": "DateCarried" },
                    { "data": "DateInvoiced" },
                    { "data": "DateLogged" },
                    { "data": "TimeJobStart" },
                    { "data": "TimeJobFinish" }

                ],
                "columnDefs": [
                    {
                        "targets": [0],
                        "visible": false
                    }
                ],
                "pageLength": 40,
                scrollY: "300px",
                scrollX: true,
                paging: true
            });
            
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <label for="lblYear" class="control-label col-sm-1 ">Year</label>
            <div class="col-sm-3">
                <input type='text' id="txtYear" asp-for="LogYear" class="form-control disabled" onchange="GetBreakDownLog()" />
            </div>
            <label for="lblMonth" class="control-label col-sm-1 ">Month</label>
            <div class="col-sm-3">
                <select id="dropdownMonth" class="form-control" asp-for="LogMonth" onchange="GetBreakDownLog()">
                    <option value="1">Jan</option>
                    <option value="2">Feb</option>
                    <option value="3">Mar</option>
                    <option value="4">Apr</option>
                    <option value="5">May</option>
                    <option value="6">Jun</option>
                    <option value="7">Jul</option>
                    <option value="8">Aug</option>
                    <option value="9">Sep</option>
                    <option value="10">Oct</option>
                    <option value="11">Nov</option>
                    <option value="12">Dec</option>
                </select>
                <span asp-validation-for="LogMonth" class="text-danger"></span>


            </div>


            <table id="BreakDownLog" class="table table-bordered table-striped" style="width: 100%">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Employee</th>
                        <th>Customer</th>
                        <th>Date Carried</th>
                        <th>Date Invoiced</th>
                        <th>Date Logged</th>
                        <td>Time Job Start</td>
                        <td>Time Job Finish</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>LogID</td>
                        <td>EmployeeName</td>
                        <td>CustomerCode</td>
                        <td>DateCarried</td>
                        <td>DateInvoiced</td>
                        <td>DateLogged</td>
                        <td>TimeJobStart</td>
                        <td>TimeJobFinish</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </form>
</body>
</html>

Here's the result of this demo:

As you can see in above gif, i have not added any data to test yet. Thus, you will need to test in your own project and see if the problem will be solved.

If the problem keep still, please feel free to let me know.

Hope this will work for you.

Best Regard,

Yang Shen

Answer 2

User-1355965324 posted

Many Thanks