javascript - 将控制添加到 Bootstrap 分页中每页的行数

Question

Bootstrap 分页控件似乎没有用于设置 UI 上每页行数的选项。

我见过很多基于 bootstrap 的分页控件，但很少有这个选项。

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

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

类似于 Angular UI Pagination非常适合该项目，但我不知道如何处理缺少的“每页行数”组件。

是否有针对我想要的内容预先构建的内容？如果没有，我该如何将其添加到现有控件中？

编辑:我尝试使用 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);
};

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

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

使用这个js文件，你可以从早期版本的ui bootstrap中获取它。 100% 为我工作。