连接角引导UI分页表 [英] connecting angular bootstrap ui paginate to table

问题描述

我的工作有关，我创建一个表设置的角度分页。

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.

下面是我的表身

     <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>

我已经把我的表身在 table标签之外我试了一下里面，但我的分页控件没有出现。

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

下面是我的分页

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

我还设置了一个 p标签，确保标签正在响应

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

总项目，每页和当前页面项目paragraphare所有响应分页控制器上的每个点击的内部。然而，表不发生变化。

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.

下面是我的控制器

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.

添加自定义过滤器ngRepeat

您需要能够判断哪些指数将是为每个页面和多少个项目，包括页面上的起点重复。您可以通过创建一个简单的过滤器做到这一点（我把它叫做页）。该过滤器将使用你已经在你的控制器设置了当前页和itemsPerPage值。

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"> 

创建自定义过滤器

要创建在你的名字通过自定义过滤器，然后一个工厂函数返回一个工人功能。工人功能会自动接收输入数组作为它的第一个值。随后的值是在过滤器中指定的。

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.

所以，网页过滤器获取输入数组并传递给它的两个值（当前页和pageSize的）。然后，你只用Array.slice到新数组返回重复。请记住，过滤器都是非破坏性的。他们不改变实际范围的数组。他们正在为重复使用一个新的数组。

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);
    }
  };
});

添加分页指令到页面

以下是您添加到您的HTML指令的清理版本。 不要在分页指令使用一种ngClick或ngChange 的。所以没有什么别的你所要做的ngModel设置为当前页的变量。由于当前页是双向通过ngModel，当它改变了分页指令将更新以及网页过滤器，这将反过来更新您的重复表行的约束。

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>

就这么简单。如果你想看到一个工作演示，检查Plunker。

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

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