HTML Table Paging using AngularJS and Entity Framework in ASP.Net

Last Reply one year ago By rani

Posted one year ago

How do implement paging in angularjs with

Should i use datatable plugin for paging.

Posted one year ago

Hi rani,

Refering the below article i have created the example.

ASP.Net MVC: Custom Paging in WebGrid using Stored Procedure and Entity Framework

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


I am making use of Microsoft's Northwind Database. You can download it from here.

Download and install Northwind Database



using System.Collections.Generic;
using System.Data.Objects;
using System.Linq;
using System.Web.Services;


Imports System.Collections.Generic
Imports System.Data.Objects
Imports System.Linq
Imports System.Web.Services



public static CustomersDetails PopulateCustomers(int pageIndex)
    NorthwindEntities entities = new NorthwindEntities();
    CustomersDetails customersDetails = new CustomersDetails();
    customersDetails.PageIndex = pageIndex;
    customersDetails.PageSize = 10;
    ObjectParameter recordCount = new ObjectParameter("RecordCount", typeof(int));
    customersDetails.Customers = entities.GetCustomers(customersDetails.PageIndex, customersDetails.PageSize, recordCount).ToList();
    customersDetails.RecordCount = Convert.ToInt32(recordCount.Value);
    return customersDetails;

public class CustomersDetails
    public List<Customer> Customers { get; set; }
    public int PageIndex { get; set; }
    public int PageSize { get; set; }
    public int RecordCount { get; set; }


Public Shared Function PopulateCustomers(ByVal pageIndex As Integer) As CustomersDetails
    Dim entities As NorthwindEntities = New NorthwindEntities()
    Dim customersDetails As CustomersDetails = New CustomersDetails()
    customersDetails.PageIndex = pageIndex
    customersDetails.PageSize = 10
    Dim recordCount As ObjectParameter = New ObjectParameter("RecordCount", GetType(Integer))
    customersDetails.Customers = entities.GetCustomers(customersDetails.PageIndex, customersDetails.PageSize, recordCount).ToList()
    customersDetails.RecordCount = Convert.ToInt32(recordCount.Value)
    Return customersDetails
End Function

Public Class CustomersDetails
    Public Property Customers As List(Of Customer)
    Public Property PageIndex As Integer
    Public Property PageSize As Integer
    Public Property RecordCount As Integer
End Class


<html xmlns="">
<head runat="server">
    <style type="text/css">        
        .Pager span
            text-align: center;
            color: #333;
            display: inline-block;
            width: 20px;
            background-color: #B8DBFD;
            margin-right: 3px;
            line-height: 150%;
            border: 1px solid #B8DBFD;
        .Pager a
            text-align: center;
            display: inline-block;
            width: 20px;
            background-color: #ccc;
            color: #333;
            border: 1px solid #ccc;
            margin-right: 3px;
            line-height: 150%;
            text-decoration: none;
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src="ASPSnippets_Pager.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope) {
            GetCustomers(1, $scope);
            $("body").on("click", ".Pager .page", function () {
                GetCustomers(parseInt($(this).attr('page')), $scope);
        function GetCustomers(index, $scope) {
                url: 'Default.aspx/PopulateCustomers',
                type: "POST",
                contentType: 'application/json',
                data: '{pageIndex:' + index + '}',
                success: function (response) {
                    $scope.Customers = response.d.Customers;
                        ActiveCssClass: "current",
                        PagerCssClass: "pager",
                        PageIndex: response.d.PageIndex,
                        PageSize: response.d.PageSize,
                        RecordCount: response.d.RecordCount
                error: function (err) {
    <form id="form1" runat="server">
    <div ng-app="MyApp" ng-controller="MyController">
        <h4>Customers</h4><hr />
        <table id="tblCustomers" cellpadding="0" cellspacing="0">
            <tbody ng-repeat="m in Customers">
        <br />
        <div class="Pager">