Question

我已成功添加了表分拣机的服务器端分页。我只是想知道如何刷新它？我想创建一个按钮来调用刷新功能。有谁知道是否有任何方法可以做到这一点？我不想为它重新加载页面。

更新：

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

使用AJAX的HTML呈现功能如下所示：

  $('.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)填充数据;

服务器端与tablesorter的分页 - 如何刷新它？

1 个答案: