Question

bootstrap分页控件似乎没有选项来设置UI上每页的行数。

我已经看到很多基于bootstrap的分页控件，但很少有这个选项。

bs_pagination接近，但它似乎只是设置中的固定值而不是数组。

jeasyui可以做到，但许可证与我的项目不兼容，并且它有自己的风格。

像Angular UI Pagination这样的东西很适合项目，但我不知道如何处理每页丢失的行数＃34;成分

是否有为我想要的东西预先建造的东西？如果没有，我将如何将其添加到现有控件？

编辑：我尝试使用Bootstrap输入组向Angular UI组件添加一个控件，但最终我得到了一个非常宽的选择框，在分组控件中有大量的填充。 http://plnkr.co/edit/k1ZXOBZPAfp8Nb1kLKn6?p=preview

<div class="input-group"> 
<span class="input-group-addon">
  <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" boundary-links="true" rotate="true" num-pages="numPages" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></uib-pagination>
</span>
 <span class="input-group-addon">
  <select id="numbers" class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</span>
</div>

Answer 1

您可以使用以下链接。 UI Bootsrap pagination demo

而且新代码也已更改，我认为它们存在问题。您可以使用以下代码并导入我的特定版本。然后你可以毫无错误地使用它。

<pagination total-items="totalItems" ng-model="currentPage" ng-show="showPagination"
                                        ng-change="pageChanged()"></pagination>

在这里，我使用ng-show隐藏分页，直到加载数据。并且还从服务器加载了totalItems，你也可以加载硬编码。而且pageChanged（）是以下函数，您可以根据需要更改它。

$scope.pageChanged = function () {
    console.log($scope.currentPage);
    var number = parseInt(00);
    number = parseInt($scope.currentPage);
    if (number === 1) {
        number = 0;
    } else {
        number = (number - 1) * 10;
    }
    console.log("OFFSET IS : ,", number);
    getData($scope.loan.branch, $scope.loan.center, $scope.loan.fromDate, $scope.loan.toDate, number);
};

并使用以下脚本加载角度ui设置。

<script src="lib/js/ui-bootstrap-tpls-0.11.0.js" type="text/javascript"></script>

使用此js文件，您可以从早期版本的ui bootstrap中获取该文件。 100％为我工作。

为每页行数添加控制到引导分页

1 个答案: