SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 49
  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,155
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post I am stuck on this jquery

    Hi, can you help me please i want to make pagination and display it to table. The data is from the database,but the problem is that i am lost with this code.I don't know what to do.can you help me please.


    Code:
    <?php
       include_once('configdb.php');
    
    
    
    ?>
    
    <!Doctype html>
    <html lang="en">
    
    <html>
    
       <head>
           <script type="text/javascript" src="./jq_pagination/jquery/jquery.min.js"></script>
           <script type="text/javascript" src="./jq_pagination/jquery_pagination/jquery.pagination.js"> </script>
           <link  rel="stylesheet"  type="text/css"  href="./jq_pagination/jquery_pagination/pagination.css"/>
    
       <script type="text/javascript">
    
           var condata='';
           $(function (){
               $.ajax({
                     type: 'post',
                     url: 'getData.php',
                     success: function(mydata){
                         condata = mydata;
                     }
    
               });
    
           });
    
    
           function handlePaginationClick(new_page_index, pagination_container){
                    var paginationItems = $('paginationNavigation').data(condata);
                    startItem = new_page_index * this.items_per_page;
                    endItem = Math.min(startItem + this.items_per_page,condata.length),
                    i,
                   newcontent ='';
    
                 for(i=startItem;i<endItem;i+1){
                     newcontent = condata;
                 }
    
                 $('#datacontent').html(newcontent);
    
           }
    
           $("#paginationNavigation")
    
                   .pagination(condata.length, {
                       items_per_page: 4,
                       callback: handlePaginationClick
                   });
    
       </script>
       </head>
      <body>
       <div id="paginationNavigation">
    
       </div>
    
       <div id="datacontent">
    
       </div>
    
       </body>
       </html>
    getData.php
    Code:
    <?php
    
    
    
       include_once('configdb.php');
    
    
    
          $sql  = $db->prepare("select * from abc");
         $sql->execute();
    
      echo" <table>";
        while($row=$sql->fetch(PDO::FETCH_OBJ)){
    
            echo"    <tr>
                   <th>ID</th><th>studname</th><th>age</th>
                </tr>
                 <tr>
                   <td>".$row->id."</td>
                   <td>".$row->studname."</td>
                   <td>".$row->age."</td>
                 </tr>";
    
    
    
        }
    
      echo "</table>";
    
    ?>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi jemz,

    How's it going?

    Let me see if I've got this straight:

    You're using this plugin: http://beneverard.github.com/jqPagination/
    You want to fetch data from your database, then paginate the results, displaying them in a table.

    Correct?

    P.S. I'm off out for the afternoon, but will look at this later.

  3. #3
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,155
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo, yes your correct...please help me on this i am pulling out my hair here.

  4. #4
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,155
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo, I really could not get the result by displaying the result in the table and paginate it.

  5. #5
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,155
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo, I think this plug-in i used
    http://archive.plugins.jquery.com/project/pagination

    because i found on this thread and this is what paul_wilkins suggested to use jquery pagination
    http://www.sitepoint.com/forums/show...enation-Script

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi jemz,

    Are you trying to paginate JSON, or what does your PHP script return?

  7. #7
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,155
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo, in my getData.php i only echo the result...please see my post#1

  8. #8
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,155
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo, sorry if i am confuse to answer your question...can you show me how to paginate json.

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi jemz,

    Both is possible, but I think it makes more sense for you to grab as many records as you need from your database, and paginate these.
    Forget about the JSON.

    So, can you post the results of your database query?
    That is, with this code, you are creating a table:

    PHP Code:
    <?php
      
    include_once('configdb.php');
      
    $sql  $db->prepare("select * from abc");
      
    $sql->execute();
      echo
    " <table>";
      while(
    $row=$sql->fetch(PDO::FETCH_OBJ)){
      echo 
    "<tr><th>ID</th><th>studname</th><th>age</th></tr>
            <tr>
              <td>"
    .$row->id."</td>
              <td>"
    .$row->studname."</td>
              <td>"
    .$row->age."</td>
            </tr>"
    ;
      }
      echo 
    "</table>";
    ?>
    Can you post the table that this code creates (please use code tags if it's very big )

  10. #10
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,155
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo, here it is

    Code:
    ID	studname	age
    91 	shane 	20
    92 	charlie 	20
    93 	mellie 	25
    94 	mike 	       26
    95 	harry   	29
    96 	Tom 	       20
    98 	Jack 	       20
    99 	Feld 	       27
    100 	Marie 	26
    101 	tora 	      24
    102 	jammy 	30

    here is the code that generate that result


    generatedata.php
    Code:
    <?php
    include_once('configdb.php');
    $sql  = $db->prepare("select * from abc");
    $sql->execute();
    $msg='';
    $msg.="<table>  <tr><th>ID</th><th>studname</th><th>age</th></tr>";
    while($row=$sql->fetch(PDO::FETCH_OBJ)){
    
            $msg.="<tr>
              <td>".$row->id."</td>
              <td>".$row->studname."</td>
              <td>".$row->age."</td>
            </tr>";
    }
    $msg.= "</table>";
    
    echo $msg;
    
    ?>
    loadmydata.php

    Code:
    <?php
       include_once('configdb.php');
    
    
    
    ?>
    
    <!Doctype html>
    <html lang="en">
    
    <html>
    
       <head>
           <script type="text/javascript" src="./jq_pagination/jquery/jquery.min.js"></script>
           <script type="text/javascript" src="./jq_pagination/jquery_pagination/jquery.pagination.js"> </script>
           <link  rel="stylesheet"  type="text/css"  href="./jq_pagination/jquery_pagination/pagination.css"/>
    
       <script type="text/javascript">
    
           var condata='';
           $(function (){
               $.ajax({
                   type: 'post',
                   url: 'load_item.php',
                   success: function(mydata){
                       console.log(mydata);
                       condata = mydata;
                   }
    
               });
    
    
           });
    
    
         $(function(){
    
    
             function handlePaginationClick(newPageIndex,paginationNavigation){
    
                 var paginationItems = $('paginationNavigation').html(condata),
                         startItem =newPageIndex  * this.items_per_page,
                         endItem = Math.min(startItem + this.items_per_page,paginationItems.length),
                         i,
                         newContent ='';
    
                 for(i=startItem;i<endItem;i+=1){
                     newContent= condata;
                 }
    
                 $('#datacontent').html(newContent);
                 return false;
             }
    
    
             $("#paginationNavigation")
                     .data('paginationItems',condata)
                     .pagination(condata.length, {
                         items_per_page: 3,
                         callback: handlePaginationClick
                     });
    
         });
    
    
    
    
    
    
    
    
    
       </script>
       </head>
      <body>
       <div id="paginationNavigation">
    
       </div>
    
    
       <div id="datacontent"></div>
    
    
       </body>
       </html>

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi jemz,

    So, I would rather use the jqPagination plugin, as it is actively maintained and IMO easier to work with.

    What we need to do, is to include the plugin, output the table (please note I have added a class to the table, so that I can reference it in the jQuery), include the pagination controls, then write a little jQuery.
    The jQuery should ensure that initially all of the table rows are hidden except the first two (header and first dataset). You then tell jqPagination the maximum number of pages, as well as define a function which should be applied upon hitting any of the forwards or backwards arrows.

    It looks like this:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <!--http://www.sitepoint.com/forums/showthread.php?989241-I-am-stuck-on-this-jquery-->
        <title>jqPagination example</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script src="https://raw.github.com/beneverard/jqPagination/master/js/jquery.jqpagination.js"></script>
        <link rel="stylesheet" type="text/css" href="https://raw.github.com/beneverard/jqPagination/master/css/jqpagination.css" />
      </head>
    
      <body>
        <table width="200" border="1" class="myTable">
          <tr class="sticky">
            <th>ID</th>
            <th>Studname</th>
            <th>Age</th>
          </tr>
          <tr>
            <td>91</td>
            <td>shane</td>
            <td>20</td>
          </tr>
          <tr>
            <td>92</td>
            <td>charlie</td>
            <td>20</td>
          </tr>
          <tr>
            <td>93</td>
            <td>melli</td>
            <td>25</td>
          </tr>
          <tr>
            <td>94</td>
            <td>mike</td>
            <td>26</td>
          </tr>
          <tr>
            <td>95</td>
            <td>harry</td>
            <td>29</td>
          </tr>
          <tr>
            <td>96</td>
            <td>tom</td>
            <td>20</td>
          </tr>
          <tr>
            <td>97</td>
            <td>jack</td>
            <td>20</td>
          </tr>
          <tr>
            <td>98</td>
            <td>feld</td>
            <td>27</td>
          </tr>
          <tr>
            <td>99</td>
            <td>marie</td>
            <td>26</td>
          </tr>
          <tr>
            <td>100</td>
            <td>tora</td>
            <td>24</td>
          </tr>
          <tr>
            <td>101</td>
            <td>jammy</td>
            <td>30</td>
          </tr>
        </table>
    
        <div class="pagination">
          <a href="#" class="first" data-action="first">&laquo;</a>
          <a href="#" class="previous" data-action="previous">&lsaquo;</a>               
          <input type="text" readonly="readonly" />
          <a href="#" class="next" data-action="next">&rsaquo;</a>
          <a href="#" class="last" data-action="last">&raquo;</a>
        </div>
        
        <script>
          $(document).ready(function() {
            $('.myTable tr').hide().filter(':lt(2)').show();
            $('.pagination').jqPagination({
              max_page : $('.myTable tr').length -1,
    	  paged : function(page) {
                $('.myTable tr:not(:first)').hide();
                $($('.myTable tr')[page]).show();
              }
            });
          });
        </script>
      </body>
    </html>
    Here's a demo.
    Let me know if you have any questions.

  12. #12
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,155
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi jemz,

    So, I would rather use the jqPagination plugin, as it is actively maintained and IMO easier to work with.

    What we need to do, is to include the plugin, output the table (please note I have added a class to the table, so that I can reference it in the jQuery), include the pagination controls, then write a little jQuery.
    The jQuery should ensure that initially all of the table rows are hidden except the first two (header and first dataset). You then tell jqPagination the maximum number of pages, as well as define a function which should be applied upon hitting any of the forwards or backwards arrows.

    It looks like this:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <!--http://www.sitepoint.com/forums/showthread.php?989241-I-am-stuck-on-this-jquery-->
        <title>jqPagination example</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script src="https://raw.github.com/beneverard/jqPagination/master/js/jquery.jqpagination.js"></script>
        <link rel="stylesheet" type="text/css" href="https://raw.github.com/beneverard/jqPagination/master/css/jqpagination.css" />
      </head>
    
      <body>
        <table width="200" border="1" class="myTable">
          <tr class="sticky">
            <th>ID</th>
            <th>Studname</th>
            <th>Age</th>
          </tr>
          <tr>
            <td>91</td>
            <td>shane</td>
            <td>20</td>
          </tr>
          <tr>
            <td>92</td>
            <td>charlie</td>
            <td>20</td>
          </tr>
          <tr>
            <td>93</td>
            <td>melli</td>
            <td>25</td>
          </tr>
          <tr>
            <td>94</td>
            <td>mike</td>
            <td>26</td>
          </tr>
          <tr>
            <td>95</td>
            <td>harry</td>
            <td>29</td>
          </tr>
          <tr>
            <td>96</td>
            <td>tom</td>
            <td>20</td>
          </tr>
          <tr>
            <td>97</td>
            <td>jack</td>
            <td>20</td>
          </tr>
          <tr>
            <td>98</td>
            <td>feld</td>
            <td>27</td>
          </tr>
          <tr>
            <td>99</td>
            <td>marie</td>
            <td>26</td>
          </tr>
          <tr>
            <td>100</td>
            <td>tora</td>
            <td>24</td>
          </tr>
          <tr>
            <td>101</td>
            <td>jammy</td>
            <td>30</td>
          </tr>
        </table>
    
        <div class="pagination">
          <a href="#" class="first" data-action="first"></a>
          <a href="#" class="previous" data-action="previous">‹</a>               
          <input type="text" readonly="readonly" />
          <a href="#" class="next" data-action="next">›</a>
          <a href="#" class="last" data-action="last"></a>
        </div>
        
        <script>
          $(document).ready(function() {
            $('.myTable tr').hide().filter(':lt(2)').show();
            $('.pagination').jqPagination({
              max_page : $('.myTable tr').length -1,
    	  paged : function(page) {
                $('.myTable tr:not(:first)').hide();
                $($('.myTable tr')[page]).show();
              }
            });
          });
        </script>
      </body>
    </html>
    Here's a demo.
    Let me know if you have any questions.
    Hi pullo i saw the demo and it's working...you mean to say the one that i used the jquery pagination is outdated, and this plug in that you show is updated by the developer..Okay,can this plugin can show pagination like this below?

    First prev 1 2 3 4 5 next Last

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by jemz View Post
    Hi pullo i saw the demo and it's working...
    Glad to hear it

    Quote Originally Posted by jemz View Post
    you mean to say the one that i used the jquery pagination is outdated
    Not sure. Why don't you check Google and see if you can find its homepage.

    Quote Originally Posted by jemz View Post
    and this plug in that you show is updated by the developer.
    Of this I am sure.

    Quote Originally Posted by jemz View Post
    Okay,can this plugin can show pagination like this below?
    Nope.
    Instead of displaying a list of page numbers like traditional pagination methods jqPagination uses an interactive 'Page 1 of 5' input that, when selected, allows the user to enter their desired page number.

  14. #14
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,155
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Nope.
    Instead of displaying a list of page numbers like traditional pagination methods jqPagination uses an interactive 'Page 1 of 5' input that, when selected, allows the user to enter their desired page number.

    Okay thank you so much pullo okay, i will try this... and i will let you know

  15. #15
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,155
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo i forgot to ask, what is data-action ? is that a built in ?

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    The code in the pagination div is just taken from the jqPagination site, as is. I didn't write or modify this.

    data-action is just a way of setting a data attribute on an element, that you can later retrieve using jQuery's data API.

    E.g.

    HTML Code:
    <p id="greeting" data-name="Pullo">"Hello, there!"</p>
    Code JavaScript:
    console.log($("#greeting").data("name") + " says hello!");

    Outputs: "Pullo says hello!"

  17. #17
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,155
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo, Thank you for enlighten my mind. I will write back to you.

  18. #18
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,155
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo, I am trying to request json datatype is this correct ?

    Code:
    <?php
    include_once('configdb.php');
    $sql  = $db->prepare("select * from abc");
    $sql->execute();
    $msg='';
    $msg.="<table>  <tr><th>ID</th><th>studname</th><th>age</th></tr>";
    
    $data= array();
    while($row=$sql->fetch(PDO::FETCH_OBJ)){
    
           $msg.="<tr>
              <td>".$row->id."</td>
              <td>".$row->studname."</td>
              <td>".$row->age."</td>
            </tr>";
    
    
    
       $data["datatable"]=$msg;
    
    
    
    }
    $msg.= "</table>";
    echo json_encode($data);
    
    ?>

  19. #19
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi jemz,

    JSON is usually a collection of name/value pairs, whereas you are dealing with a lump of HTML.
    It makes no sense to return this as JSON.

    What is it that you are trying to achieve?

  20. #20
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,155
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo, what is do you mean "lump"

    JSON is usually a collection of name/value pairs
    $datacount["datatable"]=$msg; //name/value (am i wrong ?)

    What is it that you are trying to achieve?
    I am querying the table to other page, and i would like to pass in json,and then display or load in content div like you're example but you already put the table in the body..

    I want to request the data in other page via ajax and then load it in div.and then it form to a table just like what your demo.

  21. #21
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by jemz View Post
    Hi pullo, what is do you mean "lump"
    Chunk, mass, something like that.

    Quote Originally Posted by jemz View Post
    $datacount["datatable"]=$msg; //name/value (am i wrong ?)
    No, but it's intended more for a situation where it makes sense to have a number of name/value pairs, such as:

    Code:
    {
      "employees": [
        { "firstName":"John" , "lastName":"Doe" }, 
        { "firstName":"Anna" , "lastName":"Smith" }, 
        { "firstName":"Peter" , "lastName":"Jones" }
      ]
    }
    Quote Originally Posted by jemz View Post
    I am querying the table to other page, and i would like to pass in json,and then display or load in content div like you're example but you already put the table in the body..

    I want to request the data in other page via ajax and then load it in div.and then it form to a table just like what your demo.
    I would have the PHP script query the database, then echo the table (as you are doing).

    Catch this in your AJAX call, then insert the table as required.
    E.g.

    Code JavaScript:
    $.ajax({
      type: POST,
      dataType: 'html',
      url: "yourScript.php",
      success: function(data){
        $("#tableContainer").html(data);
      }
    });

  22. #22
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,155
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo, I already did this
    Code:
     $.ajax({
      type: POST,
      dataType: 'html',
      url: "yourScript.php",
      success: function(data){
        $("#tableContainer").html(data);
      }
    });
    
    but the pagination is not functioning.

  23. #23
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    How is it not functioning?
    What is data returning?

  24. #24
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,155
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I put this code in the head tag

    $(document).ready(function() {
    $('.myTable tr').hide().filter(':lt(2)').show();
    $('.pagination').jqPagination({
    max_page : $('.myTable tr').length -1,
    paged : function(page) {
    $('.myTable tr:notfirst)').hide();
    $($('.myTable tr')[page]).show();
    }
    });
    });

  25. #25
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,046
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    That's nice, but doesn't answer my question


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
  •