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",
url: "Filename.aspx/FunctionName",
data: '{Data You want to pass}',
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (data) {
},
error: function (result) {
}
});
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)