jquery数据表第二次执行不重绘数据

Question

I'm trying to load data from the server, on the first load it works great, but when I reload, it doesn't do anything. Please, don't kill me, this is a legacy project.

I try to make a normal call and reload the datatable but didn't work too.

In the documentation said than the clear of the table will be enoght, I try it and clear function is not reconized.

Script

jQuery(document).ready(function() {
    App.initSelect();

    //Initialization of the datatable
    var grid = new Datatable();
    InitGrid(); //function for update the grid;

    //Button used to reload the data, and work to go to server
    $("#btn_refresh").click(function () { 
        grid = new Datatable();
        InitGrid(); 
        grid.submitFilter(); //if i dont put this, it doesn't go to the server 
    });
   
    function InitGrid() {
        grid.init({
            src: $("#datatable_report_sales"),
            dataTable: {
                 "destroy": true, 
                "serverSide": true,
                "bPaginate": false,
                "order": [[5, "desc"]],
                "ajax": {
                    "url": "/api/Lotteries/GetSales",
                    "draw": 1,
                    "data": function (data) {
                        data.date = $('#reportrange span').text(); 
                        ui.block('Loading...');
                    },
                    "dataSrc": function (res) {
                        ui.unblock();
                        return res.data;
                    },
                }
            }
        });
    }
});

Html

        <div class="portlet-body flip-scroll">
                  <table class="table table-bordered table-striped table-condensed flip-content dataTable no-footer" 
                       id="datatable_report_sales" style="margin: 0 !important;" role="grid">
                    <thead class="flip-content">
                        <tr role="row"><th class="sorting" tabindex="0" aria-controls="datatable_report_sales"
                                           rowspan="1" colspan="1" aria-label=" Vendedor : activate to sort column ascending">
                            Seller </th><th width="15%" class="sorting" tabindex="0" aria-controls="datatable_report_sales" 
                                              rowspan="1" colspan="1" aria-label=" Venta : activate to sort column ascending">
                            Sale </th><th width="15%" class="sorting" tabindex="0" aria-controls="datatable_report_sales"
                                           rowspan="1" colspan="1" aria-label=" Comisión : activate to sort column ascending"> 
                            Comisión </th><th width="15%" class="sorting" tabindex="0" aria-controls="datatable_report_sales" 
                                              rowspan="1" colspan="1" aria-label=" Comisión Sup. : activate to sort column ascending">
                            Comisión Sup. </th><th width="15%" class="sorting" tabindex="0" aria-controls="datatable_report_sales"
                                                   rowspan="1" colspan="1" aria-label=" Premios : activate to sort column ascending"> 
                            Prices </th><th width="15%" class="sorting_desc" tabindex="0" aria-controls="datatable_report_sales" 
                                             rowspan="1" colspan="1" aria-sort="descending" aria-label=" Resultado : activate to sort column ascending"> 
                            Result
                                 </th></tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <div class="bottom"></div><div class="clear"></div>
           
    </div>

Answer 1

I guess than for any reason the destroy need to be forced in this version of datatable, so I destroy the table inside the element table before initializing it again, I'm not sure than this is the most convenient, but it works for now

  $("#btn_refresh").click(function () { 
        
        $("#datatable_report_sales").DataTable().destroy();
        grid.submitFilter();
        grid = new Datatable();
        InitGrid(); 

    });

Answer 2

init() method is only for initializing a DataTable . You should use it the first time only. After you initializing the DataTable, You can use ajax.reload(); to update the table with new data using an ajax request.

https://datatables.net/reference/api/ajax.reload()

Try this,

$("#btn_refresh").click(function () { 
        // ....
        grid.ajax.reload();
        // ....
});