div paginaton

Question

User81789783 posted

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

Answer 1

User-474980206 posted

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.

Answer 2

User283571144 posted

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

Answer 3

User81789783 posted

i need to do  pagination in div

Answer 4

User283571144 posted

Hi 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

Answer 5

User81789783 posted

i m using div for showing records rather than table and using above mention js file in  my old post

Answer 6

User81789783 posted

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;
            }
        }
    }
}

Answer 7

User283571144 posted

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