Click here to Skip to main content
12,248,978 members (34,936 online)
Click here to Skip to main content
Add your own
alternative version

Stats

8.2K views
80 downloads
14 bookmarked
Posted

Custom Paging using Ajax

, 3 Jun 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Paging using AJAX

Introduction

This will help you with very fast paging navigation and you can also customize rows per page.

Background

WebMethod and AJAX

Note: After downloading the demo, you have to run database script & then make change of ConnectionString in Web.config file.

Using the Code

This demo gets data with WebMethod and transfers to client side in JSON 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

$.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

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

HTML Code

<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

CREATE PROCEDURE [dbo].[sp_User]
    @operation int=0,
    @StartIndex int=0,
    @PageSize int=0,
    @NumberOfPage int=0,
    @NumberOfPageModulo int=0,
    @TotalRecords int=0
AS
BEGIN
    IF(@operation=1)
        BEGIN
            select @NumberOfPage= count(*)/@PageSize,@NumberOfPageModulo= _
            count(*)%@PageSize,@TotalRecords= count(*) from tbl_User

            if(@NumberOfPageModulo>0)
            set @NumberOfPage += 1


            ;with samp as(
                select ROW_NUMBER() OVER (ORDER BY User_id ASC) AS CountData,* from tbl_User
                )
                select *,@NumberOfPage as NumberOfPage,@TotalRecords as TotalRecords _
                from samp where CountData between @StartIndex and _
                ((@StartIndex-1)+@PageSize) ORDER BY CountData
        END
END

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

        }
        [WebMethod]

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

            Users dataServices = new Users();

            DataTable dtAllUserData = new DataTable();

            dtAllUserData = dataServices.GetAllUser(StartIndex, PageSize);

            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

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

History

  • 21st May, 2014: Initial post

Point of Interest

Custom Paging using AJAX with Sorting (Version 2.0)

License

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

Share

About the Author

HardikPatel89
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

 
QuestionCustom Paging using Ajax Pin
Deb-Samrat27-May-14 0:46
memberDeb-Samrat27-May-14 0:46 
AnswerRe: Custom Paging using Ajax Pin
HardikPatel8927-May-14 0:59
professionalHardikPatel8927-May-14 0:59 
GeneralMy vote of 1 Pin
Sunasara Imdadhusen26-May-14 23:27
professionalSunasara Imdadhusen26-May-14 23:27 
GeneralRe: My vote of 1 Pin
HardikPatel8926-May-14 23:38
professionalHardikPatel8926-May-14 23:38 
Questionwhat's "data.d" stand for? Pin
Member 1064962021-May-14 16:42
memberMember 1064962021-May-14 16:42 
AnswerRe: what's "data.d" stand for? Pin
HardikPatel8921-May-14 19:59
professionalHardikPatel8921-May-14 19:59 

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.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160426.1 | Last Updated 3 Jun 2014
Article Copyright 2014 by HardikPatel89
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid