服務器端分頁與tablesorter - 如何刷新它？

Question

我已經成功添加了桌面分揀機的服務器端分頁。我只想知道我該如何刷新它？我想創建一個按鈕來調用刷新功能。有誰知道是否有任何方法可以做到這一點？我不想爲它重新加載頁面。

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]; 
         } 
         }, 

感謝， 埃裏克

Answer 1

您repsonse是JSON，很容易一點點AJAX功能。

例如你的HTML是這樣的：

<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> 

您迴應JSON也許是這樣的：

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

你的HTML渲染AJAX功能將類似於：

$('.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. 
      }); 

      }); 
    }) 

這意味着：你創建新的HTML，並填寫你的數據，一切正常。 有一段時間我創建了一個空的模板，放在一些視圖中並克隆它。

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

，當我需要的時候，我打電話jQuery的var $template = $('.sample-template').clone();然後用$template.find('span').text(item.content)填寫數據;