Question

我在插入数据后重新加载dataTable插件时遇到了一些问题。如果不使用dataTable jQuery插件我可以做到，但我需要将两者结合起来。这是代码：

$('#tabela').DataTable({
   pageLength: 25,
   dom: 'Bfrtip'
});

当我插入我使用的数据时：

$('#insert_form').on("submit", function(event){
        event.preventDefault(); //stops page refresh
        $.ajax({
            url:"testes/insert.php", //file to insert data into DB
            method:"POST",
            data:$('#insert_form').serialize(),
            beforeSend:function(){
                $('#insert').val("Inserting");
            },
            success:function(data){
                $('#insert_form')[0].reset();
                $('#add_data_Modal').modal('hide');
                $('#participantes_table').html(data);
            }
        });
    });

现在我的问题是，如何在dataTable中重新加载数据？

祝你好运， FábioPeixeiro

编辑：我关注了这个视频： https://www.youtube.com/watch?v=5wDc47jcg0o

Answer 1

您需要使用数据表函数

var table = $('#tabela').DataTable()
    table.ajax.reload( null, false );

Answer 2

我过去曾使用table.draw()来做这件事。

说明

执行添加或删除操作等操作时   行，改变了排序，过滤或分页的特性   表格你会希望DataTables更新显示以反映这些   变化。此功能是为此目的而提供的。

https://datatables.net/reference/api/draw()

所以我认为你可以做到以下几点：

var table = $('#tabela').DataTable({
   pageLength: 25,
   dom: 'Bfrtip'
});

$('#insert_form').on("submit", function(event) {
  event.preventDefault(); //stops page refresh

  $.ajax({
    url:"testes/insert.php", //file to insert data into DB
    method:"POST",
    data:$('#insert_form').serialize(),
    beforeSend:function(){
      $('#insert').val("Inserting");
    },
    success:function(data){
      $('#insert_form')[0].reset();
      $('#add_data_Modal').modal('hide');
      $('#participantes_table').html(data);
      table.draw(); // replace table with whatever your reference to the datatable is
    }
  });
});

Answer 3

您可以使用ajax重新加载

$（'＃myTable'）。DataTable（）。ajax.reload（）;

我如何重新加载我的dataTable？

3 个答案: