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

Question

我使用 Jquery 清除表 tbody 并通过 ajax 调用重新插入。 数据显示后，但排序 function 无法正常工作。 这是我的代码..

<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

扩展 Bhushan Kawadkar 评论，您需要为此使用 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>