【问题标题】:Pagination and filtering issue in jquery and cakephpjquery 和 cakephp 中的分页和过滤问题
【发布时间】:2013-06-15 13:09:12
【问题描述】:

表单中有过滤器。根据按钮的点击,我进行了 ajax 调用。

$.getJSON('<?php echo $this->Html->url(array('controller'=>'buying', 'action'=>'purchase_orders')); ?>/'+warehouse_id+'/'+status+'/'+start_date+'/'+end_date+'/'+supplier_id, 
            function(data) {
                var table_row = '';
                $.each(data, function(key,value){ 
                    table_row += '<tr><td class="sl"><input name="checkboxlist" type="checkbox" class="select" value="'+value.PurchaseOrder.id+'"/></td><td class="name"><a href="/snow_white/buying/view_purchase_order/'+value.PurchaseOrder.id+'">'+value.PurchaseOrder.order_no+'</a></td><td class="description">'+value.PurchaseOrder.order_date+'</td><td class="description">'+value.Supplier.company_name+'</td><td class="description">'+value.Warehouse.name+'</td><td class="align-center actions"><a class="btn btn-small edit-po" href="/snow_white/buying/edit_purchase_order/'+value.PurchaseOrder.id+'"><i class="icon-edit"></i></a><a class="btn btn-small delete-po" href="#"><i class="icon-trash"></i></a></td></tr>';
                });
                $('#table-body').empty(table_row);
                $('#table-body').append(table_row);
                $('#table-division').show();
            });

此 AJAX 调用将以 JSON 格式返回行。使用 JSON 格式,我使用 JQUERY 脚本中的 $.each 并迭代以获取 HTML 表行,最后将其附加到表体。在这种情况下,我需要分页,任何人都可以建议我实现它的方法。

【问题讨论】:

  • 避免痛苦,使用 jQuery 插件,如 tablesorter 或 jqGrid。它们都支持 ajax 请求和分页。

标签: php jquery jquery-ui cakephp pagination


【解决方案1】:

更好的解决方案是将整个 HTML-Results-Table 接收为呈现的 HTML,而不是 JSON-Data,然后使用 AJAX-Pagination。 因此,您需要将结果表和周围的东西(过滤器等)分开。 我通常把它分为

  • 包含标题、过滤器形式的视图... (buying/purchase_orders)
  • 一个元素,包含结果表 (elements/buying/purchase_orders_filter)

我的方法是使用 jQuery 的 AJAX - 函数。

$.ajax({
    type:'get',
    url: $('base').attr('href') + 'buying/purchase_orders/warhouse_id:'+warehouse_id+'/status:'+status ...
    success: function(html){
        $('#table-division').html(html);
    }
  });

在控制器的purchase-Function 中,您尝试通过passedArgs ($this-&gt;passedArgs['warehouse_id']),... 获取参数并照常设置分页。

然后你必须告诉控制器,如果动作是通过 AJAX 调用的,那么渲染的是元素而不是视图。 RequestHandler 非常方便(在函数末尾添加):

if($this->RequestHandler->isAjax()) {
      $this->autoRender = false;
      $this->render('/elements/buying/purchase_orders_filter');
}

还要确保,要将 Filterarguments 设置回元素,您将需要它来进行分页

$this->set('warehouse_id',$this->passedArgs['warehouse_id']);
$this->set('status',$this->passedArgs['status']);
.
.

在您的purchase_orders - 视图中,渲染table-division 区域内的元素(使用$this-&gt;element()),以确保在启动时有一个未过滤的列表。

要启用 AJAX 分页,请添加以下行:

<?php $paginator->options(array(
'update'=>'table-division', 
'url' => array(
    'controller'=>'buying', 
    'action'=>'purchase_orders',
    'warehouse_id' => $warehouse_id, 
    .
    .
))); ?>

您需要在此处添加过滤器参数,以便在表格分页时过滤数据。

还有一些东西:

  • $('base').attr('href') 对您的 AJAX 请求很有帮助,它提供了 url 的第一部分,因此您可以从 controller/action/... 开始
    &lt;base href="&lt;?php echo $this-&gt;base; ?&gt;" /&gt; 添加到 layouts/default 中的 @987654337 @-部分。它非常方便。

  • 确保您的layouts- 目录中有一个空的ajax.ctp(仅包含&lt;?php echo this-&gt;fetch('content'); ?&gt;

希望这会有所帮助!

【讨论】:

  • 投反对票,因为您永远不应该通过 AJAX Web 服务发送整个 HTML 片段。它给最终用户更大的下载请求;增加带宽消耗;并且在任何其他情况下都无法使用,即如果我想在我的应用程序的另一部分使用相同的端点但标记不同 - 我被你的硬编码数据表标记所困扰。
  • 带宽点归您所有。但是为了可重用性,像他上面所做的那样在 JS 中硬编码比重新渲染元素的可重用性要低得多。 cakePHP 的 AJAX-Pagination 也是如此,重新加载 HTML 元素,我刚刚添加了过滤器功能。我想到的唯一其他解决方案是基于 JS 的分页,没有 AJAX。但请告诉我,如果有更好的做法,我会持开放态度;)
  • 我并没有说原始发布者的解决方案更好,但是通过 AJAX 传入的任何内容都应该只是数据,任何模板或渲染都在客户端完成。参数应该与请求一起发送以操作返回的数据,然后由客户端 JS 决定如何呈现它,无论是表格还是列表等。
猜你喜欢
  • 2014-02-03
  • 1970-01-01
  • 2015-12-03
  • 1970-01-01
  • 1970-01-01
  • 2011-08-12
  • 1970-01-01
  • 2012-06-27
  • 1970-01-01
相关资源
最近更新 更多