如何用jQuery中的onchange清除DataTable？

  • Z时代
  • 2024-01-10
  • 分类：问答

我已经使用fnDestroy（）来清除select元素的变化上的dataTable，但它不清除表，而是将数据追加到表中。这是代码。如何用jQuery中的onchange清除DataTable？

HTML：

<div class="col-sm-2"> 
    <select class="form-control" id="changeView"> 
     <option value="1">All</option> 
     <option value="2">Compiled</option> 
     <option value="3">On-Going</option> 
     <option value="4">Cancelled</option> 
    </select> 
</div> 
<table class="table table-condensed" id="documentsTable"> 
    <thead> 
     <tr> 
      <th>From</th> 
      <th>Status</th> 
      <th>Subject</th> 
      <th>Date Received</th> 
      <th>Due Date</th> 
      <th>Actions</th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table>

JQuery的：

$('#changeView').on('change', function() { 
    var value = $(this).val(); 
    var change = ''; 
    if (value === '1') { 
     change = 'All'; 
    } else if (value === '2') { 
     change = 'Compiled'; 
    } else if (value === '3') { 
     change = 'On-Going'; 
    } else if (value === '4') { 
     change = 'Cancelled'; 
    } 
    loadDocuments(change); 
}); 
function loadDocuments(change) { 
    $('#documentsTable').dataTable().fnDestroy(); 
    $.post(base_url + "admin/document/getAllDocuments", {change: change}, function(response, status) { 
     var result = JSON.parse(response); 
     $.each(result, function(i, field) { 
      var dateReceived = format_mysqldate(field['dateReceived']); 
      var dueDate = format_mysqldate(field['dueDate']); 
      $('#documentsTable tbody').append('<tr><td>' + field['from'] + '</td><td>' + field['status'] + '</td><td>' + field['subject'] + '</td><td>' + dateReceived + '</td><td>' + dueDate + 
        '</td><td><div class="visible-md visible-lg visible-sm visible-xs btn-group">' + 
        '<a href="' + base_url + 'admin/document/view/' + field['id'] + '" class="btn btn-primary btn-xs" title="View Details" data-toggle="tooltip"><i class="glyphicon glyphicon-search"></i></a>' + 
        '<a href="' + base_url + 'admin/document/edit/' + field['id'] + '" class="btn btn-success btn-xs" title="Edit Document" data-toggle="tooltip"><i class="glyphicon glyphicon-pencil"></i></a>' + 
        '</div></td></tr>'); 
     }); 
     $('#documentsTable').dataTable({ 
      "aoColumns": [ 
       null, 
       null, 
       null, 
       null, 
       null, 
       {"bSortable": false} 
      ], 
      "order": [[3, "desc"]], 
      "bDestroy": true 
     }); 
    }); 
}

任何一个可以告诉我什么是错我的代码？我无法在每次选择更改时清除数据表。 谢谢你。

回答：

您可能会尝试先清除数据表，然后将其销毁。

dataTable.fnClearTable(); 
dataTable.fnDraw(); 
dataTable.fnDestroy();

回答：

它可能会破坏（）http://datatables.net/reference/api/destroy()。然后清空tbody。

$('#documentsTable').dataTable().destroy(); 
$('#documentsTable tbody').empty();

回答：

清理并销毁方法可以这样调用，

var table = $('#example').DataTable(); 
//clear datatable 
table.clear().draw(); 
//destroy datatable 
table.destroy();

参考;

  • Clear API方法

  • Destroy方法

注：此代码将为1.10及以上版本的数据表工作。

以上是 如何用jQuery中的onchange清除DataTable？ 的全部内容， 来源链接： utcz.com/qa/263294.html

回到顶部