Question

如何将表ID永久绑定到jquery数据表？当我将整个html页面传递给ajax成功时，它不会继承已设置的jquery数据表函数。下面的代码运行良好，但我被迫重复这组代码，我正在避免这样，所以我想问每个人你是否可以帮助我永久绑定它或做其他方式。谢谢。

使用Javascript：

$(document).ready(function() {
$('.tbl').dataTable({
    "bJQueryUI": true,
    "iDisplayLength": 10,
    "sPaginationType": "full_numbers",
    "aLengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]]
});
$('.submitBtn').click(function(){
    alert("Just an Example.");

    $.ajax({
        type: "post",
        url: "hello",
        data: "data=" + $('#data').val(),
        beforeSend: function(){
            $('#div').hide();
        },
        success: function(page){
            $('#div').html($(page).find("div").html());
            $('.tbl').dataTable({
            "bJQueryUI": true,
            "iDisplayLength": 10,
            "sPaginationType": "full_numbers",
            "aLengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]]
        });
        },
        complete: function(){
            $('#div').show();
        }
    });
});});

Answer 1

试试这个，也许是有效的

  success: function(page){
        $('#div').html($(page).find("div").html());
        $('.tbl').destroy();
        $('.tbl').dataTable({
        "bJQueryUI": true,
        "iDisplayLength": 10,
        "sPaginationType": "full_numbers",
        "aLengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]]
    });

但我建议不要将数据作为HTML获取，而应将其作为JSON对象获取，然后使用数据更新表。

Answer 2

如果您要重新创建dataTable，必须使用destroy / bDestroy选项并复制设置。您可以将设置保存在

之类的变量中

var settings = {
   bDestroy : true, //<---
   "bJQueryUI": true,
   "iDisplayLength": 10,
   "sPaginationType": "full_numbers",
   "aLengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]]
}

任何时候（重新）创建表格：

$('.tbl').dataTable(settings);

如果您不想重新创建表格，可以清空表格，解析page并注入每个<tr> <td>：

将dataTable实例保存在变量

中

var table = $('#example').dataTable({

成功经纪人：

success: function(page){
   table.api().clear();
   $(page).find('tbody').find('tr').each(function(tr) {
      var arr = [];
      $(tr).find('td').each(function() { 
         arr.push($(this).html());
      }) 
      table.api().row.add(arr);
   })
   table.api().draw();
}

我假设你使用的是dataTables 1.10.x.如果您这样做，可以通过api()，首都DataTable()初始化来跳过D。如果您使用的是dataTables 1.9.x，请使用表。fnAddData和fnClearTable代替：

success: function(page){
   table.fnClearTable();
   $(page).find('tbody').find('tr').each(function(tr) {
      var arr = [];
      $(tr).find('td').each(function() { 
         arr.push($(this).html());
      }) 
      table.fnAddData(arr);
   })
}

将表标识永久绑定到jquery数据表

2 个答案: