Question

我需要什么

*加载Ajax时，数据重新加入。

我会在步骤中解释
1. 以下是第一步的输出：http://postimg.org/image/c6p8jwp3b/。
2. 以下是第二步的输出：http://postimg.org/image/6fm1z253h/
3. 以下是第三步的输出：http://postimg.org/image/5btny60xf/。
无重新初始化数据表。
我只想要分页，搜索应该重新定位。
我从这个网址获得了帮助：http://datatables.net/forums/discussion/256/fnreloadajax/p1。

Ajax调用代码：

   if ($('#teamTable').size() > 0)
    {

        $('#teamTable').dataTable({
            "sPaginationType": "bootstrap"
        });
    }

      $("#save_team").click(function() {
            $.ajax({
            type: "POST",
            url: "asana_team.php",
            data: { people_name: $('#e2').val(), team_name:$('#teamname').val() },
            beforeSend : function(){
                $("#team_table").remove();
                $("#team_table_div").append("<center id=\"loading\" style=\"margin-top:25%;margin-bottom:25%\"><img src='../common/images/ajax-loader.gif' /></center>");
            },
            contentType: "application/x-www-form-urlencoded"
            }).done(function(data) {
                $("#loading").remove();
                $('#team_table_div').append(data);
                $('#teamTable').dataTable({
                    "sPaginationType": "bootstrap"
                });                    
            });
        });

*工作正常但我在数据表中重新加入分页没有数据加载。

我已使用此代码重新启动表。

 function callBack()
 {
 var call= $('#teamTable');

call.dataTable({
 "sPaginationType": "bootstrap",
 "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
 "oLanguage": {
 "sLengthMenu": "_MENU_ records per page"
 } });
}
$(document).ready(function() {
callBack();
});

Answer 1

首先使用

销毁

    $('#teamTable').dataTable().fnDestroy();

然后重新初始化

    $('#teamTable').dataTable();

Answer 2

这对我有用：

首先我使用

初始化数据表

$(".myTable").DataTable({ "bDestroy": true, .... });

＆＃34; bDestroy＆＃34;在我的情况下，属性是必要的。

然后，当我有动态附加到我的表格时，我会执行以下操作：

$(".myTable").dataTable().fnDestroy();
//Append stuff to my table
$(".myTable").DataTable({ "bDestroy": true, ... });

另请注意，我在销毁表时使用dataTable()函数，并在初始化时使用DataTable()函数。

Answer 3

这对我有所帮助。

$('#teamTable').dataTable().fnDestroy();
$('#teamTable').empty();

.empty()非常重要，因为在.fnDestory()之后，表元素仍然存在潜伏的数据，这些数据也被转移到重新初始化的表中。

Answer 4

经过大量研究后，这对我有用： - 首先检查dataTable是否存在，如果确实存在，则销毁dataTable并重新创建

＆＃13;

if ($.fn.DataTable.isDataTable("#mytable")) {
  $('#mytable').DataTable().clear().destroy();
}

$("#mytable").dataTable({...
                       
                });

＆＃13;

Answer 5

试试这个：

$("#table").dataTable({
            "destroy": true,
            // ...
        });

Answer 6

if ($.fn.DataTable.isDataTable("#t_isteklerim")) {
        $("#t_isteklerim").DataTable().clear().draw();
        $("#t_isteklerim").dataTable().fnDestroy();
        $('#t_isteklerim').empty();
    }


var table = $('#t_isteklerim').DataTable({
        "bAutoWidth": true,
        'dom': 'BRlfrtip',
        "columns":        [
            {'id':'id'},
            {'tekliftarihi':'tekliftarihi'},
            {'istektarihi':'istektarihi'},
            {'istekadedi':'istekadedi'}
        ],
        "language":{"url":"<?=base_url()?>assets/libs/misc/datatables/Turkish.json"},
        "order": [[ 0, "desc" ]],
        "autoWidth":      true,
        "ajax": {
            url : "<?=base_url()?>tekliflerim/fx_get_items_isteklerim",
            type : 'GET'
        }
    }  );

DataTable（）和dataTable（）不同！

Answer 7

从@ravi dudi的答案获得帮助，我修改了一行，经过大量研究后，该解决方案对我有用。就我而言，清除数据并没有帮助，我只是销毁了现有实例并在ajax之后重新初始化。

//Check if datatable instance exists before ajax starts:
if ($.fn.dataTable.isDataTable('#dtid')) {
    $('#dtid').dataTable().fnDestroy();               
}

//reintialise after ajax success:
$('#dtid').DataTable({

Answer 8

您可能需要将dataTable存储在变量中，以便能够更改选项或调用函数。

第一步：将表存储到变量

 var oTable = $('#teamTable').dataTable({
            "sPaginationType": "bootstrap"
        });

第二步：当您要清除表格时，在您的ajax请求中。

if (oTable != undefined) {
    oTable.fnClearTable();
}

修改

var oTable; 
if ($('#teamTable').size() > 0)
    {

        var oTable = $('#teamTable').dataTable({
            "sPaginationType": "bootstrap"   //storing the instance of the dataTable for futher use in the future
        });
    }

      $("#save_team").click(function() {
            $.ajax({
            type: "POST",
            url: "asana_team.php",
            data: { people_name: $('#e2').val(), team_name:$('#teamname').val() },
            beforeSend : function(){
                $("#team_table").hide(); //we dont need to remove table, only hide it..
                $("#team_table_div").append("<center id=\"loading\" style=\"margin-top:25%;margin-bottom:25%\"><img src='../common/images/ajax-loader.gif' /></center>");
            },
            contentType: "application/x-www-form-urlencoded"
            }).done(function(data) {
                $("#loading").remove();
                $('#team_table_div').append(data);
                $('#teamTable').show();
                //here we clean the data from the table
               if (oTable != undefined) {
                    oTable.fnClearTable();
               }                  
            });
        });

如何在Ajax中重新初始化数据表

8 个答案: