Question

我使用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上的经验较少，请有人帮忙。非常感谢。

Answer 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()

这里是一个片段，以防万一。

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

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

1 个答案: