locked
After re-initiating the datatable object the row selection is not working properly RRS feed

  • Question

  • User-1355965324 posted

    Hi

    I am trying to select the row of the datatable  after deselecting the previously selected row. But once I destroy the datatable obect and then re- initiating , the previously selected rows is not deselected in my code given below

    <div class="form-group">
                        <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>
                        <div class="col-sm-3">
                            @*@Html.Label(ViewData["LockedInfo"].ToString());*@
                            <label for="lblDepot" class="control-label" id="lockmsg" style="color:yellow;font:bold">Record not locked</label>
                        </div>
    
                    </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>
                                         
    
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>LogID</td>
                                        <td>EmployeeName</td>
                                        <td>CustomerCode</td>
                                        <td>DateCarried</td>
                                        <td>DateInvoiced</td>
                                        
    
                                    </tr>
                                </tbody>
                            </table>
    
    <Script>
        $(document).ready(function () {
            
            GetBreakDownLog();
            
            var table = $('#BreakDownLog').DataTable();
            $('#BreakDownLog tbody').on('click', 'tr', function () {
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                }
                else {
                    table.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                }
    
    
            });
    
        });
    
    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();
            }
                table = $('#BreakDownLog').DataTable({
                "processing": true,
                "ajax": {
                    "url": "/Employee/GetBreakDownLog",
                    "data": report,
                    "dataSrc": function (json) {
                        return JSON.parse(json);
                    }
                }
              
            });
            
        }

    Please can you help to fix the issue with suggested code

    Many Thanks

    Pol

    Friday, September 27, 2019 8:06 PM

Answers

  • User665608656 posted

    Hi polachan,

    After testing your code, If you want to fulfill your requirements, you need to first receive the DataTable method with variables table, then call the GetBreakDownLog method, pass variables table to the method, destory tables, and recreate tables.

    You can refer to this link for reference: https://datatables.net/manual/tech-notes/3

    Here is the detailed code, you could refer to it:

      <script type="text/javascript">
            $(function () {
                var table = $('#BreakDownLog').DataTable();
                GetBreakDownLog(table);
                $('#BreakDownLog tbody').on('click', 'tr', function () {
                    if ($(this).hasClass('selected')) {
                        $(this).removeClass('selected');
                    }
                    else {
                        table.$('tr.selected').removeClass('selected');
                        $(this).addClass('selected');
                    }
                });
    
            });
            function GetBreakDownLog(table) {
    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')) { table.destroy(); } table = $('#BreakDownLog').DataTable({
    "processing": true, "ajax": {
    "url": "/Employee/GetBreakDownLog",
    "data": report,
    "dataSrc": function (json) {
    return JSON.parse(json);
    } }, }); } </script>

    Here is the result:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 30, 2019 3:13 AM

All replies

  • User665608656 posted

    Hi polachan,

    After testing your code, If you want to fulfill your requirements, you need to first receive the DataTable method with variables table, then call the GetBreakDownLog method, pass variables table to the method, destory tables, and recreate tables.

    You can refer to this link for reference: https://datatables.net/manual/tech-notes/3

    Here is the detailed code, you could refer to it:

      <script type="text/javascript">
            $(function () {
                var table = $('#BreakDownLog').DataTable();
                GetBreakDownLog(table);
                $('#BreakDownLog tbody').on('click', 'tr', function () {
                    if ($(this).hasClass('selected')) {
                        $(this).removeClass('selected');
                    }
                    else {
                        table.$('tr.selected').removeClass('selected');
                        $(this).addClass('selected');
                    }
                });
    
            });
            function GetBreakDownLog(table) {
    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')) { table.destroy(); } table = $('#BreakDownLog').DataTable({
    "processing": true, "ajax": {
    "url": "/Employee/GetBreakDownLog",
    "data": report,
    "dataSrc": function (json) {
    return JSON.parse(json);
    } }, }); } </script>

    Here is the result:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 30, 2019 3:13 AM
  • User-1355965324 posted

    Many Many Thanks

    Tuesday, October 1, 2019 6:41 PM