How To Reinitialize Datatable in Ajax

How To Reinitialize Datatable in Ajax

afeefafeef Posts: 2Questions: 1Answers: 0
edited June 2014 in Free community support

here is my code:

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

             $('#teamTable').dataTable({
            "sPaginationType": "bootstrap",
            "bRetrieve": true,
            "bDestroy":true,//storing the instance of the dataTable for futher use in the future
            });
            }

and ajax code:

     $("#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().fnDestroy();
        callBack();
        });
        });

* no intialization of boostrap search and paging using datatable
* when i click on button old boosrtap paging and search textbox has been removed .

Answers

  • PhiphPhiph Posts: 2Questions: 1Answers: 0
    edited June 2014

    Hi afeef,

    I had the same problem, but just figured it out.

    What i do is encapsulate my table in a different file.

    Table.cshtml

    <div class="row">
        <table id="example" class="display">
            <thead>
                <tr></tr>
            </thead>
    
            <tfoot>
                <tr></tr>
            </tfoot>
    
        </table>
    </div>
    

    Then in my view I have a holding div:

    <div id="divResult">
    </div>
    

    From there, I wrap my code :

      $.get("/Reports/Table").done(function (result) {
                    $("#divResult").html(result);
          $('#example').dataTable({
    "ajax": {
                        "url": "@(Url.Action("GetAllCustomers", "Reports"))",
                        "type": "POST",
                        "dataType": "json",
                        "dataSrc": ""
                    }
         });
    }); //closing tag for#divresult
    

    It works for me :) I hope this helps!

  • afeefafeef Posts: 2Questions: 1Answers: 0
    edited June 2014

    no its has not solved my problem plaese give solution according my source it would b better, i just want rintiliaze boostarp paging and searh on ajax call .
    i have also asked my question on stack over flow link: http://stackoverflow.com/questions/24452270/how-to-reinitialize-datatable-in-ajax
    2.http://stackoverflow.com/questions/24455814/how-to-reinitialize-datatable-paging-in-ajax.
    but none has solution has solved my problem

This discussion has been closed.