Show and Paging in ASP.Net Gridview Using jQuery

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();

            //Addning Table For Paging Data
            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.