Laravel 4.2 自定义分页按钮 - 为 AJAX 调用添加每个按钮的 ID答案

【问题标题】：Laravel 4.2 Custom Pagination Button - Adding a ID with each button for AJAX callLaravel 4.2 自定义分页按钮 - 为 AJAX 调用添加每个按钮的 ID
【发布时间】：2015-01-07 22:51:23
【问题描述】：

我正在使用this 教程在 Laravel 4.2 中创建自定义分页。

我正在获取此代码-

<ul class="pagination">
        <li class="disabled">
            <span>«</span>
        </li>
        <li class="active">
            <span>1</span>
        </li>
        <li>
            <a href="http://localhost/car/public/specials?page=2">2</a>
        </li>
        <li>
            <a href="http://localhost/car/public/specials?page=2" rel="next">»</a>
        </li>
</ul>

用于分页按钮。

但我需要添加一些 AJAX 和一些带有 ID 的 JS 调用。

所以，我想要这种按钮的代码-

<ul class="pagination">
        <li class="disabled" id="prev">
            <span>«</span>
        </li>
        <li class="active" id="page[1]">
            <span>1</span>
        </li>
        <li id="page[2]">
            2
        </li>
        <li  id="next">
            <span>»</span>
        </li>
</ul>

有可能吗？

请帮帮我。

提前感谢您的帮助。

【问题讨论】：

标签： php mysql css ajax laravel-4

【解决方案1】：

您可以扩展lluminate\Pagination\Presenter 类并实现其抽象方法。例如（放入app/extension文件夹）：

class CustomPresenter extends Illuminate\Pagination\Presenter {

    public function getActivePageWrapper($text)
    {
        $url = $this->paginator->getUrl($this->paginator->getCurrentPage());
        $query = parse_url($url, PHP_URL_QUERY);
        parse_str($query, $params);

        return '<li id="page['.$params['page'].']" class="active"><a href="">'.$text.'</a></li>';
    }

    public function getDisabledTextWrapper($text)
    {
        return '<li class="disabled"><a href="">'.$text.'</a></li>';
    }

    public function getPageLinkWrapper($url, $page, $rel = null)
    {
        $query = parse_url($url, PHP_URL_QUERY);
        parse_str($query, $params);
        $id = $params['page'];
        return '<li id="page['.$id.']"><a href="'.$url.'">'.$page.'</a></li>';
    }
}

在composer > autoload > classmap 部分添加一个条目，如下所示：

//...
"app/tests/TestCase.php",
"app/extensions"

要使用自定义演示器：

首先，在app/views目录下创建一个view（custom-presenter.php）。然后，将app/config/view.php 配置文件中的分页选项替换为新视图的名称，如下所示：

'pagination' => 'custom-presenter'

最后，以下代码将放置在您的自定义演示者视图中：

<ul class="pagination">
    <?php echo with(new CustomPresenter($paginator))->render(); ?>
</ul>

对于prev 和next，使用此JavaScript（我使用过jQuery）并将其包含在您的模板中：

<script>
    $(function(){
        $('ul.my-custom-pagination>li:first').attr('id', 'prev')
        $('ul.my-custom-pagination>li:last').attr('id', 'next')
    });
</script>

JS 以上代码将设置id=prev 和id=next，否则前两个lis 和后两个lis 的ID 将重复。最后，从终端运行composer dump。这是此实现的输出：

<ul class="pagination my-custom-pagination">
    <li id="prev"><a href="http://taj.dev/ladger/agency/index?page=2">«</a></li>
      <li id="page[1]"><a href="http://taj.dev/ladger/agency/index?page=1">1</a></li>
      <li id="page[2]"><a href="http://taj.dev/ladger/agency/index?page=2">2</a></li>
      <li id="page[3]" class="active">
          <a href="">3</a></li><li class="disabled" id="next"><a href="">»</a>
     </li>
</ul>

Read more on the manual.

【讨论】：

【解决方案2】：

我会给出一个更简单的方法....

把它放在views文件夹的任何地方。假设你把它（并命名）为 partials/pagination.blade.php

将以下代码放入pagination.blade.php（修改它以匹配您的视图）

@if ($paginator->getLastPage() > 1)

    <ul class="pagination">
    <li><a href="{{ $paginator->getUrl(1) }}" id="page[1]" class="{{($paginator->getCurrentPage() == 1) ? ' disabled' : '' }}">Previous</a></li>
    @for ($i = 1; $i <= $paginator->getLastPage(); $i++)
    <li><a href="{{ $paginator->getUrl($i) }}" id="page[{{$i}}]" class="{{($paginator->getCurrentPage() == $i) ? ' active' : '' }}">{{ $i }}</a></li>
    @endfor
    <li><a href="{{ $paginator->getUrl($paginator->getCurrentPage()+1) }}" id="page[{{$paginator->getCurrentPage()+1}}]" class="{{($paginator->getCurrentPage() == $paginator->getLastPage()) ? ' disabled' : '' }}">Next</a></li>
    </ul>

@endif

注意：以上代码为示例。更改布局以满足您的需要。

我在写链接时更喜欢a tags。

在调用分页器时，使用以下内容，

{{$paginator->links('partials.pagination')}}

无需经历所有这些复杂的过程。

但更多的机会是，无论你想做什么，都可以纯粹用 javascript 来完成。

【讨论】：