jemz
March 2, 2013, 8:15am
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>";
?>
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.
jemz
March 2, 2013, 2:45pm
3
Hi pullo, yes your correct…please help me on this i am pulling out my hair here.
jemz
March 2, 2013, 2:47pm
4
Hi pullo, I really could not get the result by displaying the result in the table and paginate it.
jemz
March 2, 2013, 2:58pm
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
Hi jemz,
Are you trying to paginate JSON, or what does your PHP script return?
jemz
March 2, 2013, 5:47pm
7
Hi pullo, in my getData.php i only echo the result…please see my post#1
jemz
March 2, 2013, 5:50pm
8
Hi pullo, sorry if i am confuse to answer your question…can you show me how to paginate json.
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 :))
jemz
March 2, 2013, 10:52pm
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>
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">«</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.
jemz
March 3, 2013, 1:41pm
12
James_Hibbard:
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">«</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
Glad to hear it
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.
jemz
March 3, 2013, 2:05pm
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
jemz
March 3, 2013, 2:08pm
15
Hi pullo i forgot to ask, what is data-action ? is that a built in ?
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!”
jemz
March 3, 2013, 2:16pm
17
Hi pullo, Thank you for enlighten my mind. I will write back to you.
jemz
March 3, 2013, 3:49pm
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);
?>
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?
jemz
March 3, 2013, 4:16pm
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.