SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Scotland
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Pagination, how to pass the value Dynamically?

    I use the following Script for my pagination, instread of assign static value, i need to pass the dynamic value. such as if the query result is 150 records, i need to pass the value as a dynamicaly. please help

    <html>
    <head>
    <style type="text/css">
    .spanPagerControlUnselected, .spanPagerControlSelected
    {
    font-family: arial;
    font-size: 9pt;
    font-weight: bold;
    border: 1px solid black;
    margin-right: 2px;
    margin-left: 2px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    text-decoration:none;
    color:black;
    }

    .spanPagerControlSelected:hover
    {
    background-color:gray;
    }

    .spanPagerControlSelected, .spanPagerControlUnselected:hover
    {
    background-color:#1e4490;
    color:white;
    }

    .hellip
    {
    font-weight: normal;
    font-size: 8pt;
    }
    </style>
    </head>
    <body>
    <div id="divPager"></div>
    </body>
    </html>

    <script type="text/javascript">



    function PagerControl(parameters) {

    var PagerControl = new Object();

    // Public

    PagerControl.page = function(pageNumber) {
    parameters.pagedCallback(pageNumber);
    this.currentPage = pageNumber;
    this.draw();
    };

    // Private

    PagerControl.currentPage = parameters.startPage;
    PagerControl.pageCount = parameters.pageCount;

    PagerControl.hasPreviousPage = function() {
    return (this.currentPage > 1);
    };

    PagerControl.hasNextPage = function() {
    return (this.currentPage < this.pageCount);
    };

    PagerControl.draw = function() {

    var createElement = function(page, selected, text) {

    var elementNode = document.createElement(selected ? "span" : "a");

    if (!selected)
    elementNode.setAttribute("href", "javascript:" + parameters.varName + ".page(" + page + ")");

    elementNode.setAttribute("class", selected ? parameters.selectedCssClass : parameters.unselectedCssClass);
    elementNode.appendChild(document.createTextNode(text ? text : page));

    targetDiv.appendChild(elementNode);

    }

    var currentPage = this.currentPage;
    var pageCount = this.pageCount;
    var pagesToShow = parameters.pagesToShow;
    var hellipHTML = "<span class=\"" + parameters.hellipCssClass + "\">&hellip;</span>";

    // Reset the pager element; then paint it progressively

    var targetDiv = document.getElementById(parameters.targetDiv);
    targetDiv.innerHTML = "";

    var radius = Math.floor(parameters.pagesToShow/2);
    var start = currentPage - radius;
    var stop = currentPage + radius;

    if (start < 1) {
    start = 1;
    stop = (pagesToShow > pageCount)? pageCount : pagesToShow;
    }

    if (stop > pageCount) {
    stop = pageCount;
    var potentialStart = stop - pagesToShow;
    start = (potentialStart < 1)? 1 : potentialStart;
    }

    if (this.hasPreviousPage())
    createElement(parseInt(currentPage-1), false, parameters.previousPageLabel);

    if (parameters.alwaysShowFirst && start > 1) {
    createElement(1, false);
    if (start > 2)
    targetDiv.innerHTML += hellipHTML;
    }

    for (var i = start; i <= stop; i++)
    createElement(i, (i == currentPage));

    if (parameters.alwaysShowLast && stop < pageCount) {
    if (stop < pageCount - 1)
    targetDiv.innerHTML += hellipHTML;
    createElement(pageCount, false);
    }

    if (this.hasNextPage())
    createElement(parseInt(currentPage+1), false, parameters.nextPageLabel);

    // IE won't display class styles until this:
    targetDiv.innerHTML += "";
    };

    PagerControl.draw();

    return PagerControl;
    }

    </script>

    <script type="text/javascript">

    function loadPage(page) {
    alert(page);
    // Ssend an XMLHttpRequest off to display the new page's contents in the
    // HTML document.
    }

    var pager = new PagerControl({

    startPage:1,
    pageCount: 2500,
    pagesToShow: 10,
    unselectedCssClass: "spanPagerControlUnselected",
    selectedCssClass: "spanPagerControlSelected",
    hellipCssClass: "hellip",
    previousPageLabel: "previous",
    nextPageLabel: "next",
    alwaysShowFirst: true,
    alwaysShowLast: true,
    varName: "pager",
    targetDiv: "divPager",
    pagedCallback: loadPage

    });

    /*

    Key for the parameters:

    startPage (number) - The initial page that is selected.
    pageCount (number) - The number of pages that exist.
    pagesToShow (number) - The number of pages to show to the
    left and right of the current page for example, if
    startPage (above) is 10 and pagesToShow is 7, the
    buttons for pages 7 - 13 will be displayed.
    unselectedCssClass (string) - The CSS class name for the
    page buttons that aren't the current page.
    selectedCssClass (string) - The CSS class name for the
    page button that is curreltly selected.
    hellipCssClass (string) - The CSS class name for <span>
    that displays "..." between the first and last page
    buttons if alwaysShowFirst and/or alwaysShowLast
    (below) are set to true.
    previousPageLabel (string) - The text that appears in the
    page button for the previous page.
    nextPageLabel (string) - The text that appears in the
    page button for the next page.
    alwaysShowFirst (boolean) - Specify true value to always
    show a button for page 1 (and an ellipsis is
    displayed between page 1 and the curruent page minus
    half of the pagesToShow (above).
    alwaysShowLast (boolean) - Specify true value to always
    show a button for page 1 (and an ellipsis is displayed
    between the last page and the curruent page minus half
    of the pagesToShow (above).
    varName (string) - The variable name of this new
    PageControl object.
    targetDiv (string) - Where to draw the pager.
    pagedCallback (function) - The function to fire when a
    surfer clicks a page.

    */

    </script>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Set a querystring value then retrieve it from javascript.

    Here's a library to help with the task.
    http://adamv.com/dev/javascript/querystring
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Scotland
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Following shows how to call the function called "PagerControl" and pass the value to its parameter. they call this public and it is excuted at first time. so the page count is 2500 for ever, am using ajax and when ever http responsetext i get a new set of value from database, i need to pass those record count to this pagination function parameter. so i simply call the following constructor inside some function to set its parmeter value. but i couldnt. it only works if i call the function public. please guide me over this.


    var pager = new PagerControl({
    startPage:1,
    pageCount: 2500,
    pagesToShow: 10,
    unselectedCssClass: "spanPagerControlUnselected",
    selectedCssClass: "spanPagerControlSelected",
    hellipCssClass: "hellip",
    previousPageLabel: "previous",
    nextPageLabel: "next",
    alwaysShowFirst: true,
    alwaysShowLast: true,
    varName: "pager",
    targetDiv: "divPager",
    pagedCallback: loadPage
    });
    Last edited by stephenvs; Jul 25, 2008 at 01:49.

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Scotland
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear pmw57, i really need a help over on this, please guide me...

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I'm at a loss when it comes to ajax so I'll have to leave this for someone else to help you with it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •