LEARN WRITE TWITTER LOAD MORE RESULT SCRIPT USING JQUERY AND PHP
first create table and call it pagination with 3 fields id ,name and
age and enter dummy data
mysql.php <?php @mysql_connect("localhost","root","") or die ("could not connect to mysql");@mysql_select_db("name of your database") or die ("no database");?>///////////page end here
index.php
<?php
include_once "mysql.php";//include the mysql connect script
$pagen=0;
$sql_rec = mysql_query("SELECT * FROM pagination ORDER BY id DESC LIMIT $pagen,4");//<---- this statement mean that you chose the first 4 results
while($row = mysql_fetch_array($sql_rec)){//<---- this statement fetch first 4 results$id = $row["id"];
$name = $row["name"];
$age = $row["age"];
$namelist .= 'name : '.$name.' age : '.$age.'<br />' ;
}
$sql_list = mysql_query("SELECT * FROM pagination");
$num_rows = mysql_num_rows($sql_list);//<---- this statement to determine number of row we will paginate
$pnumber = ceil($num_rows/4);//<---- we will divide the number of rows by 4 which is the number of post we will render
?>
<style type="text/css">
<!--
body {
}
.link {
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #003399;
text-decoration: none;
padding-right: 2px;
padding-left: 2px;
}
-->
</style>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$('#loading').hide();//<----this will hide loading gif
$('.link').css('display', 'none');//<----this will hide .link anchor
$('.link').first().css('display', 'none').next().css('display', 'inline-block');//<----this will show the second .link anchor
});
function pages(page){//<----this function will run we clicked on the show more link (page = '.$e.')
//$('#loading').show();//<----this loading gif will appear
//alert("page" + page);
$("#pages" + page).css('display', 'none').next().css('display', 'inline-block');//<----hide the link that you click and show the next if existed
var URL = "userslist.php";
$.post(URL,{pages:"paginate",pageNumber:page},function(data){//<----will run the userslist.php
$("#OldComment").append(data).show();//<----show the new 4 results
$('#loading').hide();
});
}
</script>
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><div id='OldComment'><?php print"$namelist"; ?></div>
<div class="pagination">
<?php
for($i=0; $i<=($pnumber-1); $i++)//<----we run a for loop that start from 0 to $pnumber {
$e= $i*4 ;//<----this will replace $pagen in the userlist.phpecho '<a class="link" id="pages'.$e.'" href="#" onclick="return false" onmousedown="javascript:pages('.$e.');">Show more</a> ';//<----when you click on this link the javascript:pages('.$e.'); will run }
?>
// <img src="loading.gif" alt="" width="15" height="15" id="loading" /></div></td>//<----this loading gif will appear every time
</tr>
</table>
/////////////////////////////page end here
userslist.php
<?php
$pagen = $_POST['pageNumber'];//<----resulted from the jquery we ran in last script
include_once "mysql.php";
if ($_POST['pages'] == "paginate"){
$sql_selfnews = mysql_query("SELECT * FROM pagination ORDER BY id DESC LIMIT $pagen,4");//<---- this statement will select next 4 results
while($row = mysql_fetch_array($sql_selfnews)){
$id = $row["id"];
$name = $row["name"];
$age = $row["age"];
$namelist .= 'name : '.$name.' age : '.$age.'<br />' ;
}
}
?>
<?php print"$namelist"; ?>//<---- this statement will render next 4 results
for better search results. I would define "PAGINATION" (creating pages etc.). Allot of people still do not know what it means. But great tut.!
ReplyDeletewhat is TWITTER PAGINATION? anyway great blog
ReplyDelete