div paginaton

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.

bruce (sqlwork.com)

Reply

Brando ZWZ

Star

9611 Points

3028 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:

   <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

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

Reply

erum

Member

80 Points

1276 Posts

Re: div paginaton

Oct 31, 2019 06:46 AM|erum|LINK

i need to do pagination in div

Reply

Brando ZWZ

Star

9611 Points

3028 Posts

Re: div paginaton

Oct 31, 2019 09:41 AM|Brando ZWZ|LINK

Hi erum,

erum
i need to do pagination in div

Please clarify more about your requirement, so that we can understand and help achieve it better.

Best Regards,

Brando

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

Reply

erum

Member

80 Points

1276 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

Reply

erum

Member

80 Points

1276 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

<script src="Scripts/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">

        $(function () {
            alert()
            $.ajax({
                type: "POST",
                url: "JqueryPagination.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: "JqueryPagination.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>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;


namespace JqueryHell
{
    public partial class JqueryPagination : System.Web.UI.Page
    {
        public const int PageSize = 5;
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        [System.Web.Services.WebMethod]
        public static string GetAllCustomers()
        {
            //int count = 0;
            DataSet ds = new DataSet();
            string str = System.Configuration.ConfigurationManager.ConnectionStrings["Data Source=erum-pc;Initial Catalog=test;User ID=sa;Password=sa providerName = System.Data.SqlClient"].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();
        }
        [System.Web.Services.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;
            }
        }
    }
}

Reply

Brando ZWZ

Star

9611 Points

3028 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

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

div paginatonRSS

7 replies

Shortcuts

div paginaton

Re: div paginaton

Re: div paginaton

Re: div paginaton

Re: div paginaton

erum

Re: div paginaton

Re: div paginaton

Re: div paginaton