I am stuck on this jquery

JavaScript
1

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.


<?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


<?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

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

Hi pullo, yes your correct…please help me on this i am pulling out my hair here.

4

Hi pullo, I really could not get the result by displaying the result in the table and paginate it.

5

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/showthread.php?816753-Jquery-JSON-Pagenation-Script

6

Hi jemz,

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

7

Hi pullo, in my getData.php i only echo the result…please see my post#1

8

Hi pullo, sorry if i am confuse to answer your question…can you show me how to paginate json.

9

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

Hi pullo, here it is


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


<?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


<?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

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:

<!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

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

Glad to hear it :slight_smile:

Not sure. Why don’t you check Google and see if you can find its homepage.

Of this I am sure.

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

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

Hi pullo i forgot to ask, what is data-action ? is that a built in ?

16

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.

<p id="greeting" data-name="Pullo">"Hello, there!"</p>

console.log($("#greeting").data("name") + " says hello!");

Outputs: “Pullo says hello!”

17

Hi pullo, Thank you for enlighten my mind. :slight_smile: I will write back to you.

18

Hi pullo, I am trying to request json datatype is this correct ?


<?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

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

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.