ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.HTML Table Paging using jQuery AJAX and JSON in C# and VB.Net<p>Hi&nbsp;SajidHussa,</p> <p>Using the below article i have created the exmple.</p> <h1 class="header"><a title="Paging in HTML Table using jQuery AJAX and JSON in ASP.Net'a" href="https://www.aspsnippets.com/Articles/Paging-in-HTML-Table-using-jQuery-AJAX-and-JSON-in-ASPNet.aspx">Paging in HTML Table using jQuery AJAX and JSON in ASP.Net</a></h1> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head id=&#34;Head1&#34; runat=&#34;server&#34;&gt; &lt;title&gt;Html Table Paging&lt;/title&gt; &lt;style type=&#34;text/css&#34;&gt; body { font-family: Arial; font-size: 10pt; } table { border: 1px solid #ccc; } table th { background-color: #F7F7F7; color: #333; font-weight: bold; } table th, table td { padding: 5px; border-color: #ccc; } .Pager span { text-align: center; color: #999; display: inline-block; width: 20px; background-color: #A1DCF2; margin-right: 3px; line-height: 150%; border: 1px solid #3AC0F2; } .Pager a { text-align: center; display: inline-block; width: 20px; background-color: #3AC0F2; color: #fff; border: 1px solid #3AC0F2; margin-right: 3px; line-height: 150%; text-decoration: none; } &lt;/style&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;ASPSnippets_Pager.min.js&#34; type=&#34;text/javascript&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(function () { GetCustomers(1); }); $(&#34;.Pager .page&#34;).live(&#34;click&#34;, function () { GetCustomers(parseInt($(this).attr(&#39;page&#39;))); }); function GetCustomers(pageIndex) { $.ajax({ type: &#34;POST&#34;, url: &#34;Default.aspx/GetCustomers&#34;, data: &#39;{pageIndex: &#39; + pageIndex + &#39;}&#39;, contentType: &#34;application/json; charset=utf-8&#34;, dataType: &#34;json&#34;, success: OnSuccess, failure: function (response) { alert(response.d); }, error: function (response) { alert(response.d); } }); } function OnSuccess(response) { var xmlDoc = $.parseXML(response.d); var xml = $(xmlDoc); var customers = xml.find(&#34;Customers&#34;); var row = $(&#34;[id*=gvCustomers] tr:last-child&#34;).clone(true); $(&#34;[id*=gvCustomers] tr&#34;).not($(&#34;[id*=gvCustomers] tr:first-child&#34;)).remove(); $.each(customers, function () { var customer = $(this); $(&#34;td&#34;, row).eq(0).html($(this).find(&#34;CustomerID&#34;).text()); $(&#34;td&#34;, row).eq(1).html($(this).find(&#34;ContactName&#34;).text()); $(&#34;td&#34;, row).eq(2).html($(this).find(&#34;City&#34;).text()); $(&#34;[id*=gvCustomers]&#34;).append(row); row = $(&#34;[id*=gvCustomers] tr:last-child&#34;).clone(true); }); var pager = xml.find(&#34;Pager&#34;); $(&#34;.Pager&#34;).ASPSnippets_Pager({ ActiveCssClass: &#34;current&#34;, PagerCssClass: &#34;pager&#34;, PageIndex: parseInt(pager.find(&#34;PageIndex&#34;).text()), PageSize: parseInt(pager.find(&#34;PageSize&#34;).text()), RecordCount: parseInt(pager.find(&#34;RecordCount&#34;).text()) }); }; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form id=&#34;form1&#34; runat=&#34;server&#34;&gt; &lt;center&gt; &lt;table id=&#34;gvCustomers&#34;&gt; &lt;tr&gt; &lt;th&gt;CustomerID&lt;/th&gt; &lt;th&gt;Contact Name&lt;/th&gt; &lt;th&gt;City&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;br /&gt; &lt;div class=&#34;Pager&#34;&gt; &lt;/div&gt; &lt;/center&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </pre> <p><strong><span style="text-decoration: underline;">Namespaces </span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System.Configuration; using System.Data; using System.Data.SqlClient; using System.Web.Services;</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System.Configuration Imports System.Data Imports System.Data.SqlClient Imports System.Web.Services</pre> <p><strong><span style="text-decoration: underline;">Code</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">private static int PageSize = 10; [WebMethod] public static string GetCustomers(int pageIndex) { string query = &#34;[GetCustomers_Pager]&#34;; SqlCommand cmd = new SqlCommand(query); cmd.CommandType = CommandType.StoredProcedure; cmd.Parameters.AddWithValue(&#34;@PageIndex&#34;, pageIndex); cmd.Parameters.AddWithValue(&#34;@PageSize&#34;, PageSize); cmd.Parameters.Add(&#34;@RecordCount&#34;, SqlDbType.Int, 4).Direction = ParameterDirection.Output; return GetData(cmd, pageIndex).GetXml(); } private static DataSet GetData(SqlCommand cmd, int pageIndex) { string strConnString = ConfigurationManager.ConnectionStrings[&#34;conString&#34;].ConnectionString; using (SqlConnection con = new SqlConnection(strConnString)) { using (SqlDataAdapter sda = new SqlDataAdapter()) { cmd.Connection = con; sda.SelectCommand = cmd; using (DataSet ds = new DataSet()) { sda.Fill(ds, &#34;Customers&#34;); DataTable dt = new DataTable(&#34;Pager&#34;); dt.Columns.Add(&#34;PageIndex&#34;); dt.Columns.Add(&#34;PageSize&#34;); dt.Columns.Add(&#34;RecordCount&#34;); dt.Rows.Add(); dt.Rows[0][&#34;PageIndex&#34;] = pageIndex; dt.Rows[0][&#34;PageSize&#34;] = PageSize; dt.Rows[0][&#34;RecordCount&#34;] = cmd.Parameters[&#34;@RecordCount&#34;].Value; ds.Tables.Add(dt); return ds; } } } }</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Private Shared PageSize As Integer = 10 &lt;WebMethod()&gt; _ Public Shared Function GetCustomers(pageIndex As Integer) As String Dim query As String = &#34;[GetCustomers_Pager]&#34; Dim cmd As New SqlCommand(query) cmd.CommandType = CommandType.StoredProcedure cmd.Parameters.AddWithValue(&#34;@PageIndex&#34;, pageIndex) cmd.Parameters.AddWithValue(&#34;@PageSize&#34;, PageSize) cmd.Parameters.Add(&#34;@RecordCount&#34;, SqlDbType.Int, 4).Direction = ParameterDirection.Output Return GetData(cmd, pageIndex).GetXml() End Function Private Shared Function GetData(cmd As SqlCommand, pageIndex As Integer) As DataSet Dim strConnString As String = ConfigurationManager.ConnectionStrings(&#34;conString&#34;).ConnectionString Using con As New SqlConnection(strConnString) Using sda As New SqlDataAdapter() cmd.Connection = con sda.SelectCommand = cmd Using ds As New DataSet() sda.Fill(ds, &#34;Customers&#34;) Dim dt As New DataTable(&#34;Pager&#34;) dt.Columns.Add(&#34;PageIndex&#34;) dt.Columns.Add(&#34;PageSize&#34;) dt.Columns.Add(&#34;RecordCount&#34;) dt.Rows.Add() dt.Rows(0)(&#34;PageIndex&#34;) = pageIndex dt.Rows(0)(&#34;PageSize&#34;) = PageSize dt.Rows(0)(&#34;RecordCount&#34;) = cmd.Parameters(&#34;@RecordCount&#34;).Value ds.Tables.Add(dt) Return ds End Using End Using End Using End Function</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/cTCjvR8.gif" alt="" width="388" height="427" /></span></strong></p>https://www.aspforums.net:443/Threads/421349/HTML-Table-Paging-using-jQuery-AJAX-and-JSON-in-C-and-VBNet/https://www.aspforums.net:443/Threads/421349/HTML-Table-Paging-using-jQuery-AJAX-and-JSON-in-C-and-VBNet/Wed, 03 Jul 2019 01:11:17 GMT