AngularJs - 在表

时间:2016-01-05 12:00:31

标签: javascript jquery angularjs pagination

需要在通过指令

生成动态tr时添加分页

enter image description here

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



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

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

2 个答案:

答案 0 :(得分:0)

嗨,这完全是因为JS加载顺序。您可能已在doc.ready()中动态加载内容,并且在dom准备好之前将执行API。在这种情况下,在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>

答案 1 :(得分:0)

要添加分页,请使用此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()));
                }
            });
        });
}]);