将 Angular Bootstrap ui 分页连接到表格 [英] connecting angular bootstrap ui paginate to table

问题描述

我正在我正在创建的表格上设置角度分页.

我已经阅读了文档.但是，我没有看到如何将分页连接到表格.我的分页大小与数组大小匹配.它们是页面长度的正确数量的按钮链接.但是，我的表格仍然是全长的，因此我无法测试我的分页.

这是我的桌子主体

 <tr ng-repeat="drink in editableDrinkList | orderBy:'-date'"><td>[[drink.name]]</td><td>[[drink.date |日期:格式:时区]]</td><td>[[drink.caffeineLevel]]</td><td><a ng-click="delete(drink._id)"><i style="font-size:18px; margin-right:5%" class="fa fa-times"></i></a><a href="" ng-click="update(drink)"><i style="font-size:22px;"class="fa fa-pencil-square-o"></i></a></td></tr></tbody>

我已经将我的表格主体设置在 表格标签之外 我在里面尝试过，但我的分页控件没有出现.

这是我的分页

<分页总项目=总项目"ng-model="currentPage"items-per-page="itemsPerPage"ng-change="pageChanged()"ng-click="setPage(currentPage)"></分页>

我还设置了一个 p 标签以确保选项卡响应

 
<p>总项目数 [[totalItems]]</p><p>itemsPerPage [[itemsPerPage]]</p><p>当前页面[[currentPage]]</p>

段落内的总项目数、每页项目数和当前页面都响应分页控制器上的每次点击.但是表格并没有改变.

这是我的控制器

var editabledrinkSet = function(){可编辑数组 = [];DrinkLibrary.getAllDrinks().success(function(data){for (var i = 0; i < data.length; i++) {如果(数据[i].可编辑){editableArray.push(data[i])};};$scope.currentPage = 1;$scope.totalItems = editableArray.length;$scope.itemsPerPage =10;$scope.maxSize = 3;$scope.setPage = function(pageNo) {$scope.currentPage = pageNo;}$scope.pageChanged = function() {$log.log('页面更改为:' + $scope.currentPage);};$scope.editableDrinkList = editableArray;});};

当我让它工作时，我会将大部分内容移到指令中.我只想先设置一下.

解决方案

您可以使用自定义过滤器执行此操作.

向 ngRepeat 添加自定义过滤器

您需要能够告诉重复哪个索引将成为每个页面的起点以及页面上包含多少项目.您可以通过创建一个简单的过滤器(我称之为页面)来做到这一点.此过滤器将使用您已在控制器中设置的 currentPage 和 itemsPerPage 值.

创建自定义过滤器

要创建自定义过滤器，请传入您的姓名，然后传入返回工作函数的工厂函数.工作函数自动接收输入数组作为它的第一个值.后续值是您在过滤器中指定的值.

所以 pages 过滤器获取输入数组和传递给它的两个值(currentPage 和 pageSize).然后您只需使用 Array.slice 将新数组返回到重复中.请记住，过滤器是非破坏性的.他们不会改变实际的作用域数组.他们正在创建一个新数组供重复使用.

app.filter('pages', function() {返回函数(输入，当前页面，页面大小){//检查是否有一个数组可以使用，这样就不会在第一个摘要中出现错误如果(angular.isArray(输入)){//数组是0基的，所以从currentPage值中减去1来计算切片开始var start = (currentPage-1)*pageSize;//切片提取到但不包括在结束参数处索引的元素，//所以只需将 currentPage 乘以 pageSize 就可以得到 end 参数var end = currentPage*pageSize;返回 input.slice(start, end);}};});

向页面添加分页指令

这是您将添加到 html 的指令的清理版本.不要在分页指令上使用某种 ngClick 或 ngChange.ngModel 设置为 currentPage 变量，因此您无需执行任何其他操作.由于 currentPage 是通过 ngModel 进行双向绑定的，因此当它更改时，分页指令将更新以及页面过滤器，这将依次更新您重复的表行.

<分页总项目=总项目"；ng-model=当前页面"items-per-page=itemsPerPage"；max-size=maxSize"></分页>

就是这么简单.如果您想查看工作演示，请查看 Plunker.

Plunker

I am working on setting up angular pagination on a table that I am creating.

I have worked through the docs. However, I am not seeing how to connect the pagination to the table. My pagination size is matching the array size. Their are the right number of button links to page the page length. However, my table is still at full length making it impossible for me to test my pagination.

Here is my table body

     <tbody>
                <tr ng-repeat="drink in editableDrinkList | orderBy:'-date'"> 
                    <td>[[drink.name]]</td>
                    <td>[[drink.date |date: format :timezone]]</td>
                    <td>[[drink.caffeineLevel]]</td>
                    <td>
                        <a ng-click="delete(drink._id)">
                            <i style="font-size:18px; margin-right:5%" class="fa fa-times"></i>
                        </a>

                        <a href="" ng-click="update(drink)">
                            <i style="font-size:22px;" class="fa fa-pencil-square-o"></i>
                        </a>
                    </td>
                </tr>
     </tbody>

I have set my table body outside of the table tag I tried it inside but my pagination controls did not appear.

Here is my pagination

<pagination  
        total-items="totalItems" 
        ng-model="currentPage" 
        items-per-page="itemsPerPage" 
        ng-change="pageChanged()" 
        ng-click="setPage(currentPage)">
</pagination>

I also set up a p tag to make sure the tabs are responding

   <div> 
        <p>total Items [[totalItems]]</p>
        <p>itemsPerPage [[itemsPerPage]]</p>
        <p>current page [[currentPage]]</p>
    </div>

The total items, items per page and current page inside of the paragraphare all responding to each click on the pagination controller. However the table is not changing.

Here is my controller

var editabledrinkSet = function(){
      editableArray = [];

      DrinkLibrary.getAllDrinks().success(function(data){
        for (var i = 0; i < data.length; i++) {
          if(data[i].editable) {
            editableArray.push(data[i])
          };
        };
        $scope.currentPage = 1;
        $scope.totalItems = editableArray.length;

        $scope.itemsPerPage =10;
        $scope.maxSize = 3;

        $scope.setPage = function(pageNo) {
          $scope.currentPage = pageNo;
        }
        $scope.pageChanged = function() {
          $log.log('Page changed to: ' + $scope.currentPage);
        };

        $scope.editableDrinkList = editableArray;
      });
    }; 

When I get it working I will move most of it out into a directive. I just want to get it set up first.

解决方案

You can do this with a custom filter.

Add a Custom Filter to ngRepeat

You need to be able to tell the repeat which index is going to be the starting point for each page and how many items to include on the page. You can do this by creating a simple filter (I called it pages). This filter is going to use the currentPage and itemsPerPage values that you already set up in your controller.

<tr ng-repeat="drink in editableDrinkList | orderBy:'-date' | pages: currentPage : itemsPerPage"> 

Create the Custom Filter

To create a custom filter you pass in your name and then a factory function that returns a worker function. The worker function automatically receives the input array as its first value. The subsequent values are the ones you specified in your filter.

So the pages filter gets the input array and the two values passed to it (currentPage and pageSize). Then you'll just use Array.slice to return the new array to the repeat. Remember, filters are non-destructive. They aren't changing the actual scoped array. They are creating a new array for the repeat to use.

app.filter('pages', function() {
  return function(input, currentPage, pageSize) {
    //check if there is an array to work with so you don't get an error on the first digest
    if(angular.isArray(input)) {
      //arrays are 0-base, so subtract 1 from the currentPage value to calculate the slice start
      var start = (currentPage-1)*pageSize;
      //slice extracts up to, but not including, the element indexed at the end parameter,
      //so just multiply the currentPage by the pageSize to get the end parameter
      var end = currentPage*pageSize;
      return input.slice(start, end);
    }
  };
});

Add the Pagination Directive to the Page

Here's the cleaned up version of the directive you'll add to your html. Don't use an kind of ngClick or ngChange on the pagination directive. ngModel is set to the currentPage variable so there's nothing else you have to do. Since currentPage is two-way bound via ngModel, when it changes the pagination directive will update as well as the pages filter, which will in turn update your repeated table rows.

<pagination  
    total-items="totalItems" 
    ng-model="currentPage" 
    items-per-page="itemsPerPage"
    max-size="maxSize">
</pagination>

It's that simple. If you want to see a working demo, check the Plunker.

Plunker

这篇关于将 Angular Bootstrap ui 分页连接到表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！