Pagination and searching doesnot work if content are dynamically add in part of DataTables

johnmtarin

I am using DataTables where onload it shows a list of records example 10 record , After i add next record ie eleventh record(ajax) ,i brings all record after addition without refresh and append it to <tbody> part of DataTables, Now my datatable is showing 11 records. but on first page of pagination . In this condition 10 record should be present on first page of pagination and 11th on second page of pagination .But it is not working

function save_data(){

$(document).ready(function(){

 var form_data = $("#myform").serialize();

  $.ajax({
    url:'<?php echo base_url('reclist/save');?>',
    type:'post',
    datatype:'json',
    data: form_data,
    success: function(info){
         var json = JSON.parse(info);
         if(json.status){
             var i;
             for(i=0;i < json.err_input.length;i++){

                 $('input[name="'+json.err_input[i]+'"]').addClass('error');
                 $('input[name="'+json.err_input[i]+'"]').next().addClass('error_msg');
                  $('input[name="'+json.err_input[i]+'"]').next().text(json.err_msg[i]);
                }
         }
         else{
            var op = '';
            $.each(json.record,function(k,v){
            op+= "<tr>"+
            "<td>"+v.fname+"</td>"+
            "<td>"+v.lname+"</td>"+
            "<td>"+v.email+"</td>"+
            "</tr>";
            op+= v.fname;
        });

        $("#rec_list_div").html(op);
        $("#result").html(json.response);
        $("#result").html(json.response);

         }
    },
    errror:function(XMLHttpRequest, textStatus, errorThrown){
        alert("Status: " + textStatus); alert("Error: " + errorThrown); 
    }
 });

  });

//});
}

First Name	Last Name	Email
First Name	Last Name	Email

</table>