CODEWITHSUNDEEP
phpjqueryajaxdatatables
Roshan Zaid
Roshan Zaid

Reputation: 389

Refresh DataTable without reloading page

I am trying to reload data tables that have been inserted into tabs.

Please refer to question: AJAX Update DataTable after On Success

A PHP class userX.php has 3 data tables with client-side implementations. I am able to change a row of the first table using a button, once it is done the record will go to tab 2 -> and the content of it table two. I am changing the status now using AJAX as this:

  $(".changeStatus").click(function(event){
      if(confirm("Are you sure changing status?")){
        event.preventDefault();
        var status =  "In Production";
        var id = $(this).attr('data-id');
        $.ajax({
          url     : 'dbo.php',
          method  : 'POST',
          data    : {status : status , id : id},
          success : function(data){
            $('tr#'+id+'').css('background-color', '#ccc');
            $('tr#'+id+'').fadeOut('slow');
          }
        });
      }
      else{
        return false;
      }
    });

In the meantime it has to be updated in the tab 2 table as well. I have tried achieving this using div contents; neither of them seems working. What am I missing? I am open to suggestions.

Upvotes: 3

Views: 25783

Answers (2)

Roshan Zaid
Roshan Zaid

Reputation: 389

The table can simply be reloaded by reinitializing method of the datatable also reloading it through its built in AJAX. The below code block would help.

             $(document).on('click','#ChangeNext',function(event){
                if(confirm("Are you sure changing status?")){
                    event.preventDefault();
                    var statusid = $(this).attr('data-id');
                    $.ajax({
                        url     : 'dbo.php',
                        method  : 'POST',
                        data    : {statusid : statusid},
                        success : function(data)
                        {
                            $('#exampleone').DataTable().ajax.reload();
                        }
                    });
                }
                else{
                    return false;
                }
            });

Upvotes: 6

AmirAli Esteki
AmirAli Esteki

Reputation: 552

the best way for putting data in a DataTables with ajax requests, is DataTables ajax api that you can see it in following link:

DataTables Ajax sourced data

jQuery sample:

jQuery('.changeStatus').click(function(event){
    $('#example').DataTable({ ajax: 'data.json' });
});

JSON Sample:

{
    "data": [
        [
            "Roshan Zaid",
            "Stackoverflow user",
            "New member"
        ],
        [
            "AmirAli Esteki",
            "Stackoverflow and AskUbuntu user",
            "New member"
        ]
    ]
}

the response of your ajax requests should be json by default

Upvotes: 0

Related Questions