Question

我首先要说的是，我看到有很多关于这个主题的信息，但我找不到一个可靠的答案，以明确在Ajax调用后尝试更新表时最佳做法是什么。< / p>

我有一个HTML表格，我希望在用户通过选择日期范围生成ajax调用后用新数据更新。选择范围后，Ajax调用会创建新表，我会像这样更新DOM：

$(document).ready(function(){
$('#selecDate').on('DOMSubtreeModified',function(){

  range = getRange() ;

  $.ajax({
               type: 'POST',
               url: '/revenue',
               data: {'start' : range[0], 'end' : range[1]},
               dataType: 'json',
               success: function(response){
                updateTable(response);
               },
               error: function(response){
                   console.log('error:' + response);
               },
             });
});
});

updateTable(response) - 接受响应时调用的函数： function updateTable（response）{

var table = '<table class="table table-bordered data-table sortable" id="rev-table"><thead>';
table += '<tr><th colspan="10">Income</th><th colspan="9">Spent</th>';
table += '<tr><th>Website Name</th><th>Google</th>...LOTS OF LINES
var total_spent= response[website]['total_spent'];...LOTS OF LINES
table += '<tr><td>' + website + '</td>';
table += '</tr>';
}
table += '</tbody></table>';
$('#rev-table-cont').html(table);

这是一张很长的桌子，所以我切了很大一部分，但我猜你有这个想法...... 无论我在哪里编写很多线路，它们都会做同样的事情 问题： 我曾经能够使用以下代码对表进行排序：

$(document).ready(function(){

    $('#rev-table').DataTable({
        "bJQueryUI": true,
        "processing": true,
        "sPaginationType": "full_numbers",
        "sDom": '<""l>t<"F"fp>'
        });
    $('select').select2();

    $('.active').removeClass("active");
    $('#revenueReport').addClass("active");

});

但现在创建新表并使用此行更新DOM

$('#rev-table-cont').html(table);

该表不再可排序，代码不起作用，我在控制台中没有错误。我找到了关于这个主题的一些线索，比如这个链接： https://datatables.net/reference/api/ajax.reload()，或者在这里很多问题，但它只是我无法得到一个明确的答案，我应该解决这个问题..创建一个像我正在做的新表将被视为最佳实践或是在那里其他方式？为什么在ajax调用之后桌子不再可以排序？任何领导都会非常有帮助...... thx！

Answer 1

你还没有表现出来，但我认为当页面加载时，会有一个带有id＆＃34; rev-table＆＃34;这是＆＃34; rev-table-cont＆＃34;的一个孩子。元件。此表具有应用于其的DataTable功能（根据您的脚本）。

问题是，在应用ajax之后，您创建了一个新的<table>元素来替换它，但是您没有给它一个id。

有几种解决方案： 1）更改<table class="table table-bordered data-table sortable">方法中的updateTable，以便为表格提供正确的ID：<table class="table table-bordered data-table sortable" id="rev-table">。然后，由于它实际上是一个新元素，您可能需要重新应用DataTable功能（即使用与您已有的相同$('#rev-table').DataTable(...代码。

这有一些缺点 - 您最终可能会复制一些您不需要的代码，并且可能会破坏用户在表上设置的任何现有排序/过滤等设置，这可能会被破坏惹恼他们。

2）这是我要选择的选项：不要删除并重新创建表，只改变其中的行。沿着这些方向改变功能：

function updateTable(response)
{
  var tableBody = $("#rev-table tbody");
  tableBody.empty(); //delete all the existing rows (from the body only, not the header)

  //here, process your response data to create new rows. You can create a new row like this:
  var row = $("<tr/>");
  //now go through your data items and append all the necessary cells. You can create a cell, and append it to the row something like this:
  $("<td/>", { text: response[website]['total_spent'] }).appendTo(row);
  //repeat that for each cell you need. Then once you have all the cells, append the row to the table:
  row.appendTo(tableBody);
  //and repeat that for each row you need
}

使用jQuery在ajax之后更新表

1 个答案: