如何在没有bootstrap风格的情况下使用angularjs进行分页

时间:2018-02-05 04:18:22

标签: php angularjs laravel pagination

我使用Angularjs加入分页但是我不希望Boostrap风格为我的分页模板怎么样?

我尝试使用我的模板分页在angularjs中的dirPagination.js中编辑这些函数,但它似乎没有用,任何人都有一些使用angularjs分页但不需要引导样式的示例。

function dirPaginationControlsTemplateInstaller($templateCache) {
        $templateCache.put('angularUtils.directives.dirPagination.template', '<div class="col-md-12"><ul class="pagination"><li ng-if="boundaryLinks" ng-class="{page-item disabled : pagination.current == 1 }"></li><li ng-if="directionLinks" ng-class="{page-item disabled : pagination.current == 1 }"><a class="page-link" href="" ng-click="setCurrent(pagination.current - 1)"  aria-label="Previous"><span class="sr-only">&laquo; Prev</span><span aria-hidden="true">Previous</span></a></li><li ng-repeat="pageNumber in pages track by $index" ng-class="{page-item active : pagination.current == pageNumber, disabled : pageNumber == \'...\' }"><a class="page-link" href="" ng-click="setCurrent(pageNumber)">{{ pageNumber }}</a></li><li ng-if="directionLinks" ng-class="{page-item disabled : pagination.current == pagination.last }"><a class="page-link" href="" ng-click="setCurrent(pagination.current + 1)" aria-label="Next"><span aria-hidden="true">Next &raquo;</span><span class="sr-only">Next</span></a></li><li ng-if="boundaryLinks"  ng-class="{page-item disabled : pagination.current == pagination.last }"></li></ul></div>');
    }

1 个答案:

答案 0 :(得分:0)

您可以自定义分页器视图文件以不使用默认引导程序样式。请参阅此处的文档:

https://laravel.com/docs/5.5/pagination#customizing-the-pagination-view

将视图文件传递给links方法以及您需要传递的任何数据:

{{ $paginator->links('view.name', ['foo' => 'bar']) }}