Apply Paging to dynamically add rows using AngularJS in ASP.Net MVC

Last Reply 6 days ago By dharmendr

Posted 6 days ago

Hi,

I am going to do pagination in dynamically add rows 

Ex: After entering of 10 rows if i want enter 11 th record need to display that 11th record on 2nd page

Could you please help me

@{
    Layout = null;
}

<html>
<head>
    <title></title>
</head>
<body>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $window) {           
            $scope.Customers = [];
            $scope.Add = function () {
                //Add the new item to the Array.
                var customer = {};
                customer.Name = $scope.Name;
                customer.Country = $scope.Country;
                $scope.Customers.push(customer);
                //Clear the TextBoxes.
                $scope.Name = "";
                $scope.Country = "";
            };
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th>Name</th>
                <th>Country</th>
                <th>&nbsp;</th>
            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>
                    <td><input type="text" value="{{m.Name}}" /></td>
                    <td><input type="text" value="{{m.Country}}" /></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td><input type="text" ng-model="Name" /></td>
                    <td><input type="text" ng-model="Country" /></td>
                    <td><input type="button" ng-click="Add()" value="Add" /></td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
</html>

 

Posted 6 days ago Modified on 6 days ago

Hi mahesh213,

Check this example. Now please take its reference and correct your code.

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }
}

HTML

<html>
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['angularUtils.directives.dirPagination'])
        app.controller('MyController', function ($scope, $window) {
            $scope.Customers = [];
            $scope.CustomersArray = [];
            $scope.PageIndex = 1;
            $scope.RecordCount = 0;
            $scope.PageSize = 2; // Set Pagesize as per your need.
            $scope.GetCustomers = function (index) {
                var startIndex = (index * $scope.PageSize) - $scope.PageSize;
                var endIndex = (index * $scope.PageSize) - 1;
                $scope.Customers = [];
                for (var i = startIndex; i <= endIndex; i++) {
                    if ($scope.CustomersArray[i] != undefined) {
                        $scope.Customers.push($scope.CustomersArray[i]);
                    }
                }
                $scope.RecordCount = $scope.CustomersArray.length;
            }
            $scope.Add = function () {
                if ($scope.Country != undefined && $scope.Name != undefined) {
                    if ($scope.Name != '' || $scope.Country != '') {
                        //Add the new item to the Array.
                        var customer = {};
                        customer.Name = $scope.Name;
                        customer.Country = $scope.Country;
                        $scope.Customers.push(customer);
                        $scope.CustomersArray.push(customer);
                        //Clear the TextBoxes.
                        $scope.Name = "";
                        $scope.Country = "";
                        $scope.RecordCount = $scope.CustomersArray.length;
                    }
                }
            };
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <table class="table table-bordered table-hover table-striped">
            <tr>
                <th>Name</th>
                <th>Country</th>
                <th>&nbsp;</th>
            </tr>
            <tbody dir-paginate="m in Customers|itemsPerPage:PageSize" total-items="RecordCount">
                <tr>
                    <td><input type="text" value="{{m.Name}}" class="form-control" /></td>
                    <td><input type="text" value="{{m.Country}}" class="form-control" /></td>
                    <td></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td><input type="text" ng-model="Name" class="form-control" /></td>
                    <td><input type="text" ng-model="Country" class="form-control" /></td>
                    <td><input type="button" ng-click="Add()" value="Add" class="btn btn-success" /></td>
                </tr>
            </tfoot>
        </table>
        <dir-pagination-controls max-size="PageSize" direction-links="true" boundary-links="true"
            on-page-change="GetCustomers(newPageNumber)">
        </dir-pagination-controls>
    </div>
</body>
</html>

Screenshot