Server side pagination with tablesorter - How to refresh it?

Question

I have added a server side pagination with table sorter successfully. I just would like to know how can I refresh it? I would like to create a button to call a refresh function. Does anyone know if there is any method to do it? I do not want to reload the page for it.

UPDATE:

ajaxProcessing: function(data){

                        if (data && data.hasOwnProperty('rows')) {

                          var r, row, c, d = data.rows,
                          total = data.total_rows,
                          headers = data.headers,
                          rows = [],
                          len = d.length;

                          for ( r=0; r < len; r++ ) {

                                row = []; // new row array
                                // cells

                               for (c in d[r]) {

                                     if (typeof(c) === "string") {

                                         row.push(d[r][c]); //add each table cell data to row array
                                     }
                                }


                            rows.push(row); // add new row array to rows array
                          }


                          var items="";
                          $("#tabelaTickets tr:has(td)").remove();

                          if (rows!==null && rows.length!== 0) {

                              $.each(rows,function(index,item) {


                                            $("#tabelaTickets").append('<tr class="danger"><td align="center" style="width: 70px"><a type="button" class="btn btn-primary btn-xs"  data-placement="right" title="Visualizar ticket" data-toggle="modal" class="btn btn-primary" href="visualizar.php?ticket='+item[3]+'"> #' + item[3] + '</a></td><td><div style="text-overflow:ellipsis;overflow:hidden;width:250px">' + item[4] + '</div></td><td><div style="text-overflow:ellipsis;overflow:hidden;width:350px;">' + item[5] + '</div></td><td><div style="text-overflow:ellipsis;overflow:hidden;width:250px;">' + item[6] + '</div></td><td><div style="text-overflow:ellipsis;overflow:hidden;width:60px;">' + item[7] + '</div></td><td><div style="text-overflow:ellipsis;overflow:hidden;width:70px;">' + item[8] + '</div></td></tr>');


                            });

                        }else{
                            $("#tabelaTickets").append('<tr><td colspan = "6" align="center">SEM RESULTADO A SER EXIBIDO</td></tr>');
                        }

                        $("#tabelaTickets").trigger("update");
                        $("#tabelaTickets").trigger("appendCache");

                        $("#pleaseWaitDialog").modal('hide'); 

                          // in version 2.10, you can optionally return $(rows) a set of table rows within a jQuery object
                          return [ total];
                        }
                      },

Thanks since now, Erik

Answer 1

your repsonse is JSON, it's easy with a little AJAX function.

example your HTML is look like :

<div class="wrapper">
    <div class="item">
        <span>item 01</span>
    </div>
    <div class="item">
        <span>item 02</span>
    </div>
    <div class="item">
        <span>item 03 </span>
   </div>
</div>
<button class="btn refresh-btn" type="submit"></button>

your response JSON maybe look like :

  response = {  
      { content : item11 }, 
      { content : item12 },
      { content : item13 }
  };

your HTML render function with AJAX will be look like :

  $('.refresh-btn').on('click', function() {
     var url = 'yourUrl/?param=refresh&example=true';
      var $wrapper = $('.wrapper'); // a div that wrap your new HTML.

      $.get(url, {}) //call AJAX GET new item.
           .done(function(data) {
             $wrapper.html(''); // clear old list;
             var $template = $('<div/>', {class : 'item'} ); // create item's HTML.

             data.arrayItemList.forEach(function(item) {
                var itemTemplate = $template.clone();
                itemTemplate.append($('<span/>').text(item.content));
                $wrapper.append(itemTemplate); // add new item in list.
             });

           });
   })

that's mean : you create new HTML, and fill it with your data, everything worked fine. Some time I create a empty template some where in view and clone it.

    <div class="sample-template">
        <div class="item">
            <span> </span>
        </div>
   </div>

when I need it, I call the jQuery var $template = $('.sample-template').clone(); then fill data with $template.find('span').text(item.content);