Click here to Skip to main content
13,590,511 members
Click here to Skip to main content
Add your own
alternative version


13 bookmarked
Posted 2 Jun 2014
Licenced CPOL

Custom Paging using AJAX with Sorting

, 3 Jun 2014
Rate this:
Please Sign up or sign in to vote.
Paging and Sorting with AJAX


This will help you with very fast paging navigation and you can also customize rows per page and in this version, sorting in all columns is also included.

Paging and sorting all functions works in single function or single WebMethod.


WebMethod and AJAX


  1. After downloading the demo, you have to run database script (File: Mydb_Script v2.0.sql) & then make change of ConnectionString inWeb.config file.
  2. It has change in JavaScript code for sorting functionality.

Using the Code

This demo gets data with WebMethod and transfers to client side in JSON format so there is no page reload. That's why it's faster and you can also customize design as per your requirement.

JavaScript Code Syntax

        type: "POST", //To hide in Javascript URL
        url: "Filename.aspx/FunctionName", //WebMethod URL & Function Name
        data: '{Data You want to pass}', //Data to Transfer to WebMethod
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function (data) {
            //Code for Success
        error: function (result) {
       //Error Message

jQuery File to be Used in this Demo

<script src="Script/jquery-2.1.1.min.js" 



asp:HiddenField ID="hdnStartingIndex" 
    ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="hdnEndingIndex" 

ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="hdnCurrentPage" 

ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="hdnLastPage" 

ClientIDMode="Static" runat="server" />
<div id="divAllUsers" style="background: #f3f3f3;">

Stored Procedure In this Demo (Having some Change from version1.0)

CREATE PROCEDURE [dbo].[sp_User]
    @operation int=0,
    @StartIndex int=0,
    @PageSize int=0,
    @NumberOfPage int=0,
    @NumberOfPageModulo int=0,
    @TotalRecords int=0,
    @WhereConditionAccount varchar(Max)='',
    @WhereConditionCount varchar(Max)='',
    @EndIndex int=0,
    @PageIndex int=0,
    @Query varchar(max)='',
    @SortOrder varchar(50)=''
            select @NumberOfPage= count(*)/@PageSize,_
            @NumberOfPageModulo= count(*)%@PageSize,@TotalRecords= count(*) from tbl_User

            set @NumberOfPage += 1

            set @Query=';with samp as(
                select ROW_NUMBER() OVER ('+@SortOrder+') AS CountData,* from tbl_User
                select *,'+convert(varchar(50),@NumberOfPage)+' _
                as NumberOfPage,'+convert(varchar(50),@TotalRecords)+' _
                as TotalRecords from samp where CountData between '+_
                convert(varchar(50),@StartIndex)+' and '+_

C# Code in this Demo

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using JS.Services.ServiceClasses;
using System.Data;

namespace JSCustomPaging
    public partial class JSGrid : System.Web.UI.Page
        protected void Page_Load(object sender, EventArgs e)


        public static AllUsers[] GetAllUserData(int StartIndex, int PageSize, string SortingOrder)
            List<AllUsers> Details = new List<AllUsers>();

            Users dataServices = new Users();

            DataTable dtAllUserData = new DataTable();

            dtAllUserData = dataServices.GetAllUser(StartIndex, PageSize, SortingOrder);

            if (dtAllUserData != null)
                foreach (DataRow dtRow in dtAllUserData.Rows)
                    AllUsers SetData = new AllUsers();

                    SetData.User_id = Convert.ToInt32(dtRow["User_id"]);
                    SetData.Name = Convert.ToString(dtRow["Name"]);
                    SetData.City = Convert.ToString(dtRow["City"]);
           = Convert.ToString(dtRow["email"]);
                    SetData.CountData = Convert.ToInt32(dtRow["CountData"]);
                    SetData.TotalRecords = Convert.ToInt32(dtRow["TotalRecords"]);
                    SetData.NumberOfPage = Convert.ToInt32(dtRow["NumberOfPage"]);


            return Details.ToArray();

        public class AllUsers
            public int User_id { get; set; }
            public string Name { get; set; }
            public string City { get; set; }
            public string email { get; set; }
            public int CountData { get; set; }
            public int TotalRecords { get; set; }
            public int NumberOfPage { get; set; }


In Version 1.0

  • Faster response
  • No reload page
  • Customized page size
  • Customized design

In Version 2.0

  • Sorting in Ascending/Descending in All Columns


  • 21st May, 2014: Initial post Version 1.0
  • 03rd June,2014 : With sorting functionality Version 2.0


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Web Developer PaperSave
India India

Hardik Patel

I am ASP.Net developer since january,2014, @ Satva Infotech, Paldi, Ahmedabad.

I like to learn new tips & tricks in development.

I always like to be updated in technology & also in development.

I also like to share my knowledge with everyone.

I also like to accept new difficulties in project development.

I always spend my time in learning new things.

I am working with SQL ,Javascript ,jQuery ,Ajax ,WebServices ,ASP.NET ,C# etc..

Feeling very happy to developing new projects... Big Grin | :-D Smile | :)

You may also be interested in...


Comments and Discussions

QuestionNice! Pin
Volynsky Alex3-Jun-14 8:10
professionalVolynsky Alex3-Jun-14 8:10 
AnswerRe: Nice! Pin
HardikPatel893-Jun-14 21:06
professionalHardikPatel893-Jun-14 21:06 
QuestionRe: Nice! Pin
Volynsky Alex3-Jun-14 23:12
professionalVolynsky Alex3-Jun-14 23:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web03-2016 | 2.8.180618.1 | Last Updated 3 Jun 2014
Article Copyright 2014 by HardikPatel.SE
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid