Сортировка данных не работает должным образом после уничтожения таблицы и воссоздания

Question

Я использую Jquery для очистки таблицы и повторной вставки через вызов ajax. после того, как данные показаны, но функция сортировки не работает должным образом. вот мои коды ..

<table class="table table-bordered table-striped table-condensed flip-content table-hover" style="table-layout:fixed;" id="datatable1">
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
        </tr>
    </thead>
    <tbody id="agtBody">
        <?php 
        foreach($results as $result) :
        ?>
            <tr>
                <?php if(isset($game_name['gpname'])){?>
                    <td><?=$game_name['gpname']?></td>
                <?php }else{ ?>
                    <td><?=$result['gpid']?></td>
                <?php } ?>
                <td style="text-align:right;"><?=Helper::money($result['betAmt'])?></td>
                <td style="text-align:right;"><?=Helper::money($result['payout'])?></td>
                <td style="text-align:right;"><?=Helper::money($result['winLoss'])?></td>
                <td style="text-align:right;"><?=Helper::money($result['validbetamount'])?></td>
            </tr>
        <?php endforeach; ?>
    </tbody>
    <tfoot id ="agtFoot">
        <tr style="background-color:#FFEEDD;">
            <td>Total</td>
            <td style="text-align:right;"><?=Helper::money($totalbetAmt)?></td>
            <td style="text-align:right;"><?=Helper::money($totalpayout)?></td>
            <td style="text-align:right;"><?=Helper::money($totalwinLoss)?></td>
            <td style="text-align:right;"><?=Helper::money($totalvalidbetamount)?></td>
        </tr>
    </tfoot>
</table>

<script type="text/javascript">
    function search_agtdetail(agentcode) {
        if($("#agt_StartTime").val() == "" || $("#agt_EndTime").val() == "") {
            alert("<?php echo 'Not Valid' ?>"); 
        } else {
            $("#agtBody").empty();
            $("#agtFoot").empty();
            $.ajax({
                type: "post",
                url: "/report/agentBoxAjax",
                dataType: "json",
                data: {
                    start_date: $("#agt_StartTime").val(),
                    end_date: $("#agt_EndTime").val(),
                    agent_code : agentcode,
                },
                success: function (data) {
                    $('#datatable1').dataTable().fnDestroy();
                    $('#agtBody').html(data.html);
                    $('#agtFoot').html(data.html_foot);
                    $('#datatable1').css('width', '');
                    $('#datatable1').dataTable({
                        'bPaginate':false,
                        'bSort': true,
                    });
                }
            });
        }
    }

    $(document).ready(function(){
        $('#datatable1').dataTable({
            'bPaginate':false,
            'bSort': true,
        });
    });

</script>

Может кто-нибудь мне помочь? Сортировка не работает должным образом. Это похоже на использование старых данных для сортировки. У меня было меньше опыта по jquery, кто-то, пожалуйста, помогите. Большое вам спасибо.

Answer 1

Расширяя комментарий Бхушана Кавадкара, вы должны использовать для этого метод API. Также вы должны использовать методы ajax для вашей таблицы данных.

Например, предположим, что я получаю данные на стороне сервера отскрипт с именем data.php, я бы просто назвал его так:

$('#datatable1').dataTable({
    'bPaginate':false,
    'bSort': true,
    "ajax": {
         "url": "data.php",
         "type": "GET"
    }
});

post.php должен возвращать данные в формате json, как это (на примере машины):

{
    "data":[
         [
             "Ford",
             "Fiesta",
             "2015"
         ],
    ]
}

в вашем разделе успеха в вызове ajax вместо уничтожения таблицы просто используйте:

$('#datatable1').ajax.reload()

На всякий случай вот фрагмент.

$(document).ready(function() {

  var table = $('#example').DataTable({
    "ajax": 'https://raw.githubusercontent.com/DataTables/DataTables/master/examples/ajax/data/arrays.txt',
  });
  
   $("#reload_table").on("click",function(){
        console.log("reloading data");
        table.ajax.reload();
   });

});

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">

<html>

<body>
  <table id="example" class="display" style="width:100%">
    <thead>
      <tr>
        <th>Name</th>
        <th>Profession</th>
        <th>City</th>
        <th>Date</th>
        <th>Salary</th>
      </tr>
    </thead>
  </table>
</body>

<input id="reload_table" type="button" value="RELOAD TABLE">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>

</html>