Normall you add a prev / next buttons with click handlers. The handlers pass the current pagination index, and the direction or the requested page number via an Ajax call. The server returns json data that the JavaScript formats, or the actual html.
According to your description, I suggest you could firstly calculate the page number when page loading and write a method in the code-behind to query the record based on the client side current page number.
More details ,you could refer to below codes:
Client-side:
<script src="Scripts/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "WebForm4.aspx/GetAllCustomers",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var count = (/^\d+$/.test(xml.find("Fruit").length / 2))? xml.find("Customers").length % 2 : (xml.find("Fruit").length % 2) + 1;
var divHtml = "";
var buttonHtml = "";
for (var i = 0; i < 2; i++) {
divHtml += xml.find("Fruit").eq(i).text() + "<br/>";
}
for (var i = 0; i < count; i++) {
var button = '<input type="button" class="page" value=' + (i + 1).toString() + ' onclick="pageClick(' + (i + 1).toString() + ')">';
buttonHtml += button;
}
$("#div").html(divHtml);
$("#div").after(buttonHtml);
},
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
});
function pageClick(pageIndex) {
GetCustomers(pageIndex);
}
function GetCustomers(pageIndex) {
$.ajax({
type: "POST",
url: "WebForm4.aspx/GetCustomers",
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);
}
});
}
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var divHtml = "";
for (var i = 0; i < 3; i++) {
divHtml += xml.find("Fruit").eq(i).text() + "<br/>";
}
$("#div").html(divHtml);
};
</script>
<div id="div">
</div>
Code-behind:
public const int PageSize = 5;
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string GetAllCustomers()
{
//int count = 0;
DataSet ds = new DataSet();
string str = System.Configuration.ConfigurationManager.ConnectionStrings["aspnet-TestApplicationWithDatabase-20190820030542ConnectionString"].ConnectionString;
{
SqlConnection conn = new SqlConnection(str);
conn.Open();
string sql = "SELECT * FROM Fruit ";
SqlDataAdapter ad = new SqlDataAdapter(sql, conn);
ad.Fill(ds);
ds.Tables[0].TableName = "Fruit";
conn.Close();
// count = ds.Tables[0].Rows.Count % pageSize == 0 ? ds.Tables[0].Rows.Count / pageSize : (ds.Tables[0].Rows.Count / pageSize) + 1;
}
return ds.GetXml();
}
[WebMethod]
public static string GetCustomers(int pageIndex)
{
return GetData(pageIndex).GetXml();
}
private static DataSet GetData(int pageIndex)
{
string str = System.Configuration.ConfigurationManager.ConnectionStrings["aspnet-TestApplicationWithDatabase-20190820030542ConnectionString"].ConnectionString;
{
SqlConnection conn = new SqlConnection(str);
conn.Open();
string sql = @"SELECT * FROM (
SELECT *,ROW_NUMBER() OVER(ORDER BY Id) AS RowNumber FROM Fruit
) tb WHERE RowNumber BETWEEN(" + (pageIndex - 1).ToString() + ") *" + PageSize.ToString() + " + 1 AND(((" + (pageIndex - 1).ToString() + ") *" + PageSize.ToString() + " + 1) + " + PageSize.ToString() + @" ) - 1
";
SqlDataAdapter ad = new SqlDataAdapter(sql, conn);
DataSet ds = new DataSet();
ad.Fill(ds);
ds.Tables[0].TableName = "Fruit";
conn.Close();
return ds;
}
}
Result:
Best Regards,
Brando
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Please clarify more about your requirement, so that we can understand and help achieve it better.
Best Regards,
Brando
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
According to your code, I have no errors . Can you please give me more error messages?I suggest you could try to use F12 develop tool to see what happened when you view it in the server.
Best Regards,
Brando
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Member
84 Points
1323 Posts
div paginaton
Oct 28, 2019 10:50 AM|erum|LINK
i need to do custom pagination for dynamically generated div from database . please note down i m using 3.2.1 min.js
any one can help
All-Star
58254 Points
15675 Posts
Re: div paginaton
Oct 28, 2019 02:08 PM|bruce (sqlwork.com)|LINK
Normall you add a prev / next buttons with click handlers. The handlers pass the current pagination index, and the direction or the requested page number via an Ajax call. The server returns json data that the JavaScript formats, or the actual html.
google for dozens of examples.
Star
9831 Points
3120 Posts
Re: div paginaton
Oct 30, 2019 01:50 AM|Brando ZWZ|LINK
Hi erum,
According to your description, I suggest you could firstly calculate the page number when page loading and write a method in the code-behind to query the record based on the client side current page number.
More details ,you could refer to below codes:
Client-side:
Code-behind:
Result:
Best Regards,
Brando
Member
84 Points
1323 Posts
Re: div paginaton
Oct 31, 2019 06:46 AM|erum|LINK
i need to do pagination in div
Star
9831 Points
3120 Posts
Re: div paginaton
Oct 31, 2019 09:41 AM|Brando ZWZ|LINK
Hi erum,
Please clarify more about your requirement, so that we can understand and help achieve it better.
Best Regards,
Brando
Member
84 Points
1323 Posts
Re: div paginaton
Oct 31, 2019 10:42 AM|erum|LINK
i m using div for showing records rather than table and using above mention js file in my old post
Member
84 Points
1323 Posts
Re: div paginaton
Nov 01, 2019 03:28 AM|erum|LINK
well brando ,here is updated code
it says "undefine" when i run code
Star
9831 Points
3120 Posts
Re: div paginaton
Nov 06, 2019 07:55 AM|Brando ZWZ|LINK
Hi RateFor,
According to your code, I have no errors . Can you please give me more error messages?I suggest you could try to use F12 develop tool to see what happened when you view it in the server.
Best Regards,
Brando