How To Reinitialize Datatable in Ajax

Question

What I Need

*When Ajax is loaded datable is reintailized.

• i would explain in steps

  1. Here is the output of first step :http://postimg.org/image/c6p8jwp3b/.
  2. Here is the output of second step :http://postimg.org/image/6fm1z253h/
  3. Here is the output of third step:http://postimg.org/image/5btny60xf/.

• No Reinitialize Of datatable.

• I just want paging and search should be reintialized.

• i have taken help from this url: http://datatables.net/forums/discussion/256/fnreloadajax/p1.

Ajax call code:

   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"
                });                    
            });
        });

* working fine but i reintializing pagination in datatable no datable is loaded.

• i have used this code to reinitailize table.

   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

This worked for me after a lot of research:- First check if dataTable exist or not, if it does then destroy dataTable and recreate it

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

$("#mytable").dataTable({...
                       
                });

Answer 2

This worked for me:

First I initalize the datatable, with

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

The "bDestroy" attribute was necessary in my case.

Then when I have something to append dynamically to my table I do the following:

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

Also notice that I use the dataTable() function when destroying the table and the DataTable() function when initalizing it.