Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML

Custom Paging using AJAX with Sorting

Paging and Sorting with AJAX

Introduction

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.

Background

WebMethod and AJAX

Note

  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

JavaScript
$.ajax({
        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

HTML
<script src="Script/jquery-2.1.1.min.js" 
    type="text/javascript"></script>

HTML Code

HTML
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;">
</div> 

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

SQL
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)=''
AS
BEGIN
    IF(@operation=1)
        BEGIN
            select @NumberOfPage= count(*)/@PageSize,_
            @NumberOfPageModulo= count(*)%@PageSize,@TotalRecords= count(*) from tbl_User

            if(@NumberOfPageModulo>0)
            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 '+_
                convert(varchar(50),((@StartIndex-1)+@PageSize))
                
                execute(@Query)
        END
END

C# Code in this Demo

C#
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)
        {

        }
        [WebMethod]

        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"]);
                    SetData.email = Convert.ToString(dtRow["email"]);
                    SetData.CountData = Convert.ToInt32(dtRow["CountData"]);
                    SetData.TotalRecords = Convert.ToInt32(dtRow["TotalRecords"]);
                    SetData.NumberOfPage = Convert.ToInt32(dtRow["NumberOfPage"]);

                    Details.Add(SetData);
                }
            }

            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; }
        }
    }
}

Features

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

History

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

License

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