销毁表并重新创建后数据表排序无法正常工作答案

【问题标题】：Datatable sorting not working properly after destroyed the table and recreate销毁表并重新创建后数据表排序无法正常工作
【发布时间】：2019-10-25 02:59:08
【问题描述】：

我使用 Jquery 清除表 tbody 并通过 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的经验较少，请有人帮忙。非常感谢。

【问题讨论】：

jQuery 数据表需要使用其 API 方法刷新和重绘，而不是直接替换 html。您需要提供 JSON 格式的数据，详情请参阅datatables.net/examples/server_side/post.html

标签： php jquery ajax datatables

【解决方案1】：

扩展 Bhushan Kawadkar 评论，您需要为此使用 API 方法。此外，您应该为数据表使用 ajax 方法。

例如，假设我从名为 data.php 的脚本中获取服务器端数据，我会这样称呼它：

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

post.php需要像这样返回json格式的数据（以car为例）：

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

在 ajax 调用的成功部分，而不是破坏表，只需使用：

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

这里有一个 sn-p 以防万一。

$(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>

【讨论】：