为该行添加新行和定位分页?

时间:2015-12-28 09:16:49

标签: javascript jquery angularjs pagination

我正在制作动态表格。我有一个工作添加按钮,在表中添加行,我也有一个工作分页。现在我不打算将这两者结合起来。

当我添加新行时,我不会被放置在创建行的分页的最后一页。现在我总是留在第一页的分页,并手动转到最后一页。

有人可以帮忙吗?提前谢谢!

script.js

(function () {
    "use strict";

var table = angular.module('myTable', ['angularUtils.directives.dirPagination','ngStorage']); 


table.controller('TodoCtrl', function ($scope, $localStorage) {
    $scope.$storage = $localStorage.$default({
        "todos":[
            { "id":1,"text":"drive a car"},
            { "id":2,"text":"go to work"}
        ]           
    });
    $scope.todoData = $localStorage.todos;  
});


$scope.addRow = function (arr) {
            console.log(arr);
            arr.push({'id':$scope.id, 'text': $scope.text});        
            };
});

的index.html

<button type="button" class="btn btn-default btn-block" ng-click="addRow($storage.todos)">New record</button>

<table>
    <thead></thead>
        <tbody>
            <tr dir-paginate="todo in todoData">
                <td>
                    {{ todo.id }}
                </td>
                <td>                
                    {{ todo.text }}
               </td>
           </tr>
     </tbody>
</table>

<dir-pagination-controls
    max-size="5"
    direction-links="true"
    boundary-links="true" >
</dir-pagination-controls>

1 个答案:

答案 0 :(得分:1)

编辑:

current-page="myCurrentPage"添加到您拥有dir-paginate的代码中,在您的示例中为<tr>代码。将$scope.myCurrentPage = Math.ceil($scope.todos.length/$scope.entryLimit);添加到a​​ddDeveloperRow函数。

Working Plunker