The following is my data table structure from which I am fetching data:
Image 1.
Data in my table:
Image 2.
To do this I created the following Stored Procedure:
Image 3.
My Stored Procedure is:
- CREATEPROCEDURE [dbo].[GetStudentData]
- (
- @PageIndex INT= 1,
- @PageSize INT= 10,
- @RecordCount INTOUTPUT
- )
- AS
- BEGIN
- SETNOCOUNTON;
- SELECTROW_NUMBER()OVER
- (
- ORDERBY StudentID ASC
- )AS RowNumber
- ,StudentID
- ,Name
- ,Email
- ,Class,EnrollYear,City, Country INTO #Results FROM Student
-
- SELECT*FROM #Results
- WHERE RowNumber BETWEEN(@PageIndex -1)* @PageSize + 1 AND(((@PageIndex -1)* @PageSize + 1)+ @PageSize)- 1
-
- SELECT @RecordCount =COUNT(*)FROM #Results
-
- DROPTABLE #Results
- END
The following is my aspx code:
- <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="jQueryPagination.Default"%>
- <!DOCTYPEhtml>
- <htmlxmlns="http://www.w3.org/1999/xhtml">
- <headrunat="server">
- <title></title>
- <scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
- <scriptsrc="jquery.pagination.min.js"type="text/javascript"></script>
- <scripttype="text/javascript">
- $(document).ready(function () {
- GetStudents(1);
- });
- $("[id*=txtSearch]").live("keyup", function () {
- GetStudents(parseInt(1));
- });
- $(".Pagination .page").live("click", function () {
- GetStudents(parseInt($(this).attr('page')));
- });
-
- functionGetStudents(pageIndex) {
-
- $.ajax({
- type: "POST",
- url: "Default.aspx/GetStudents",
- data: '{pageIndex: ' + pageIndex + '}',
- contentType: "application/json; charset=utf-8",
- dataType: "json",
- success: OnSuccess,
- failure: function (response) {
- alert(response.d);
- },
- error: function (response) {
- alert(response.d);
- }
- });
- }
- var row;
- functionOnSuccess(response) {
- varxmlDoc = $.parseXML(response.d);
- var xml = $(xmlDoc);
- var students = xml.find("Student");
- if (row == null) {
- row = $("[id*=GridViewStudent] tr:last-child").clone(true);
- }
- $("[id*=GridViewStudent] tr").not($("[id*=GridViewStudent] tr:first-child")).remove();
- if (students.length> 0) {
- $.each(students, function () {
- var student = $(this);
- $("td", row).eq(0).html($(this).find("Name").text());
- $("td", row).eq(1).html($(this).find("Email").text());
- $("td", row).eq(2).html($(this).find("Class").text());
- $("td", row).eq(3).html($(this).find("EnrollYear").text());
- $("td", row).eq(4).html($(this).find("City").text());
- $("td", row).eq(5).html($(this).find("Country").text());
- $("[id*=GridViewStudent]").append(row);
- row = $("[id*=GridViewStudent] tr:last-child").clone(true);
- });
- var pager = xml.find("dtForPaging");
- $(".Pagination").jQ_Pager({
- ActiveCssClass: "current",
- PagerCssClass: "pager",
- PageIndex: parseInt(pager.find("PageIndex").text()),
- PageSize: parseInt(pager.find("PageSize").text()),
- RecordCount: parseInt(pager.find("RecordCount").text())
- });
-
- $(".Name").each(function () {
- varsearchPattern = newRegExp('(' + SearchTerm() + ')', 'ig');
- $(this).html($(this).text().replace(searchPattern, "<span class = 'highlight'>" + SearchTerm() + "</span>"));
- });
- }
- else {
- varempty_row = row.clone(true);
- $("td:first-child", empty_row).attr("colspan", $("td", row).length);
- $("td:first-child", empty_row).attr("align", "center");
- $("td:first-child", empty_row).html("No records found for the search criteria.");
- $("td", empty_row).not($("td:first-child", empty_row)).remove();
- $("[id*=GridViewStudent]").append(empty_row);
- }
- };
- </script>
-
- </head>
- <body>
- <formid="form1"runat="server">
- <div>
- <tablestyle="border: solid15pxblue; width: 100%; vertical-align: central;">
- <tr>
- <tdstyle="padding-left: 20px; padding-top: 20px; padding-bottom: 20px; background-color: skyblue; text-align: center; font-family: Verdana; font-size: 20pt; color: red;">jQuery: Display Records With Paging in ASP.NET Grid View using jQuery</td>
- </tr>
- <tr>
- <td>
- <tablestyle="width: 80%; text-align: center; vertical-align: central;">
- <tr>
- <tdstyle="text-align: left;">
- <asp:GridViewID="GridViewStudent"runat="server"AutoGenerateColumns="False"Width="100%"
- BackColor="#DEBA84"BorderColor="#DEBA84"BorderStyle="None"BorderWidth="1px"CellPadding="3"CellSpacing="2">
- <Columns>
- <asp:BoundFieldDataField="Name"HeaderText="Student Name"HeaderStyle-HorizontalAlign="Left"></asp:BoundField>
- <asp:BoundFieldDataField="Email"HeaderText="Email"HeaderStyle-HorizontalAlign="Left"/>
- <asp:BoundFieldDataField="Class"HeaderText="Class"HeaderStyle-HorizontalAlign="Left"/>
- <asp:BoundFieldDataField="EnrollYear"HeaderText="Enroll Year"HeaderStyle-HorizontalAlign="Left"/>
- <asp:BoundFieldDataField="City"HeaderText="City"HeaderStyle-HorizontalAlign="Left"/>
- <asp:BoundFieldDataField="Country"HeaderText="Country"HeaderStyle-HorizontalAlign="Left"/>
- </Columns>
- <FooterStyleBackColor="#F7DFB5"ForeColor="#8C4510"/>
- <HeaderStyleBackColor="#A55129"Font-Bold="True"ForeColor="White"/>
- <PagerStyleForeColor="#8C4510"HorizontalAlign="Center"/>
- <RowStyleBackColor="#FFF7E7"ForeColor="#8C4510"/>
- <SelectedRowStyleBackColor="#738A9C"Font-Bold="True"ForeColor="White"/>
- <SortedAscendingCellStyleBackColor="#FFF1D4"/>
- <SortedAscendingHeaderStyleBackColor="#B95C30"/>
- <SortedDescendingCellStyleBackColor="#F1E5CE"/>
- <SortedDescendingHeaderStyleBackColor="#93451F"/>
- </asp:GridView>
- </td>
- </tr>
- <tr>
- <td>
- <divclass="Pagination"style="background-color: orange; font-family: Verdana; font-size: 10pt; height: 30px; text-align: center; vertical-align: central; padding-top: 20px; padding-bottom: 10px;">
- </div>
- </td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- </div>
- </form>
- </body>
- </html>
Now My aspx.cs code is:
- using System;
- usingSystem.Collections.Generic;
- usingSystem.Data;
- usingSystem.Data.SqlClient;
- usingSystem.Linq;
- usingSystem.Web;
- usingSystem.Web.Services;
- usingSystem.Web.UI;
- usingSystem.Web.UI.WebControls;
-
- namespacejQueryPagination
- {
- publicpartialclassDefault : System.Web.UI.Page
- {
- privatestaticintPageSize = 5;
-
- protectedvoidPage_Load(object sender, EventArgs e)
- {
- if (!IsPostBack)
- {
- BindGridViewHeader();
- }
- }
-
- privatevoidBindGridViewHeader()
- {
- DataTabledtHeader = newDataTable();
- dtHeader.Columns.Add("Name");
- dtHeader.Columns.Add("Email");
- dtHeader.Columns.Add("Class");
- dtHeader.Columns.Add("EnrollYear");
- dtHeader.Columns.Add("City");
- dtHeader.Columns.Add("Country");
- dtHeader.Rows.Add();
- GridViewStudent.DataSource = dtHeader;
- GridViewStudent.DataBind();
- }
-
- [WebMethod]
- publicstaticstringGetStudents(intpageIndex)
- {
- stringSP_Name = "[GetStudentData]";
- SqlCommandcmd = newSqlCommand(SP_Name);
- cmd.CommandType = CommandType.StoredProcedure;
- cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
- cmd.Parameters.AddWithValue("@PageSize", PageSize);
- cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
- returnGetStudentData(cmd, pageIndex).GetXml();
- }
-
-
- privatestaticDataSetGetStudentData(SqlCommandcmd, intpageIndex)
- {
- SqlDataAdapter da;
- DataSet ds = newDataSet();
-
- SqlConnection con = newSqlConnection();
- ds = newDataSet();
- con.ConnectionString = @"Data Source=MyPC\SqlServer2k8; Initial Catalog=SchoolManagement; Integrated Security=true;";
- cmd.Connection = con;
- da = newSqlDataAdapter(cmd);
- da.Fill(ds, "Student");
- con.Open();
- cmd.ExecuteNonQuery();
- con.Close();
-
-
- DataTabledt = newDataTable("dtForPaging");
- dt.Columns.Add("PageIndex");
- dt.Columns.Add("PageSize");
- dt.Columns.Add("RecordCount");
- dt.Rows.Add();
- dt.Rows[0]["PageIndex"] = pageIndex;
- dt.Rows[0]["PageSize"] = PageSize;
- dt.Rows[0]["RecordCount"] = cmd.Parameters["@RecordCount"].Value;
- ds.Tables.Add(dt);
- return ds;
- }
- }
- }
Now run the application:
Image 4.
Image 5.
Image 6.