AngularJs-将分页添加到表格中的动态行答案

【问题标题】：AngularJs-Adding pagination to dynamic rows with in tableAngularJs-将分页添加到表格中的动态行
【发布时间】：2016-01-05 21:05:59
【问题描述】：

需要在通过指令生成动态tr的同时添加分页

在上图中，绿色框是在点击指令模板时动态生成的：

template:'&lt;tr ng-repeat="result in results" ng-class="{ \'fa-slide-up\': !showMe, \'fa-slide-down\': showMe }" &gt;&lt;div &gt;&lt;td ng-click="openDialog(result)" id="greenBackground"&gt; {{result}} &lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td id="greenBackground"&gt;&lt;/td&gt;&lt;td id="greenBackground"&gt;&lt;/td&gt;&lt;td id="greenBackground"&gt;&lt;/td&gt;&lt;td id="greenBackground"&gt;&lt;/td&gt;&lt;/div&gt;&lt;/tr&gt;',

我尝试添加 simplePagination.js 和 dirPagination.js，但它甚至没有显示动态行需要帮助

【问题讨论】：

你能分享一下小提琴吗？

标签： javascript jquery angularjs pagination

【解决方案1】：

嗨，这都是因为 JS 加载顺序。您可能已经在 doc.ready() 中动态加载内容，并且 API 将在 dom 准备好之前执行。在这种情况下，在 dom 创建结束时调用你的分页 JS

示例：将您的分页 API 调用语句放在 app.controller 中。并且在 DOM 加载结束时调用是相同的，如下所示

$scope.callUpdate = function() {
          // your pagination API calls go here instead of below treegrid sample
             $('.tree').treegrid({
                initialState : 'collapsed'
            });
        };

<table class="tree">
    <tr class="treegrid-{{valu.self}} treegrid-parent-{{valuation.parent}} " ng-repeat="valu in valuation">
      <td>{{ valu.percentage.toFixed(2) }}</td>
      <td>{{ valu.percentage.toFixed(2) }}</td>
    </tr>
    <span>{{callUpdate()}}</span>
  </table>

【讨论】：

【解决方案2】：

要添加分页，我使用这个 js 库。

Ng-Table

并将其添加到我的表中

<table class="table table-bordered" ng-table="tableParams">

主要：

var miApp = angular.module('Clinica', ['ngRoute', 'ngTable', 'ngCookies']);

控制器：

miApp.controller('profesionalController', ['$scope', 'profesionalService', '$rootScope', 'ngTableParams', function ($scope, profesionalService, $rootScope, ngTableParams) {

profesionalService.getClinic().then(function (datos) {
            $scope.profesionals = datos;
            var data = $scope.profesionals;
            $scope.tableParams = new ngTableParams({
                page: 1, // show first page
                count: 3           // count per page        
            }, {
                total: data.length, // length of data
                getData: function ($defer, params) {                    
                    data = $scope.profesionales;                   
                    params.total(data.length);                    
                    if (params.total() <= ((params.page() - 1) * params.count())) {
                        params.page(1);
                    }                    
                    $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                }
            });
        });
}]);

【讨论】：