Answered by:
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>Friday, September 27, 2019 2:14 PM
Answers
-
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
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, September 30, 2019 8:21 AM
All replies
-
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
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, September 30, 2019 8:21 AM -
User-1355965324 posted
Many Thanks
Tuesday, October 1, 2019 6:41 PM