Question

第一次将数据插入表格时，它会被插入到datatable tbody中。下次当我更改数据tbody时会添加数据表tbody。我想删除数据表的tbody以使我的代码工作。

 <table frame="hsides" id="table">
        <thead>
            <tr>
                <th>Rules</th>
            </tr>
     </thead>
 </table>


$.ajax({url: '../controllers/manage_rule_controller.php',

    type: 'POST',
    data: { "operation": "get_rule"},
    dataType:"json",
        },

         success: function (data) {
         keys = Object.keys(data);
         var table = document.getElementById("table");
         $("#table").find("tr:not(:first)").remove();
         var tBody = document.createElement("tbody");
         table.appendChild(tBody);

        for(i=0;i<keys.length;i++)
        {
            var row = tBody.insertRow(i);
            var cell1 = row.insertCell(0);
            cell1.innerHTML = "<div class='col-md-12 col-sm-12 col-xs-12 testdiv' id='fullrule"+keys[i]+"'><div style='border-bottom:1px solid #f2f2f2' class='col-md-10 col-sm-10 col-xs-8'  id='rule"+keys[i]+"' onclick='updaterule(this)'>"+data[keys[i]]+" </div></div>"

        } var dataTable = $('#table').DataTable();  
    }, 
  });

Answer 1

因为你正在使用table.appendChild（tBody），所以每次都会追加新生成的html。因此，在添加新的html之前，请尝试使用html（）或清除旧的HTML。

Answer 2

在调用ajax并重新绘制数据表之前，

var dataTable = $('#table').DataTable();
dataTable.rows().remove().draw();

如何使用ajax动态创建数据表？

2 个答案: