Ajax Load More Pagination ResultsCreate table
CREATE TABLE IF NOT EXISTS `paginate` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(60) NOT NULL,
`message` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=51 ;
//index.php <?php include("config.inc.php"); $results = mysqli_query($connecDB,"SELECT COUNT(*) FROM paginate"); $get_total_rows = mysqli_fetch_array($results); //total records //break total records into pages $total_pages = ceil($get_total_rows[0]/$item_per_page); ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax Load More Pagination Results</title> <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var track_click = 0; //track user click on "load more" button, righ now it is 0 click var total_pages = <?php echo $total_pages; ?>; $("#results").load("fetch_pages.php", {'page':track_click} ); //initial data to load $(".load_more").click(function (e) { //user clicks on button $(this).hide(); //hide load more button on click $('.animation_image').show(); //show loading image if(track_click <= total_pages) //make sure user clicks are still less than total pages { //post page number and load returned data into result element $.post('fetch_pages.php',{'page': track_click}, function(data) { $(".load_more").show(); //bring back load more button $("#results").append(data); //append data received from server //scroll page to button element $("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 500); //hide loading image $('.animation_image').hide(); //hide loading image once data is received track_click++; //user click increment on load button }).fail(function(xhr, ajaxOptions, thrownError) { alert(thrownError); //alert any HTTP error $(".load_more").show(); //bring back load more button $('.animation_image').hide(); //hide loading image once data is received }); if(track_click >= total_pages-1) { //reached end of the page yet? disable load button $(".load_more").attr("disabled", "disabled"); } } }); }); </script> <link href="css/style.css" type="text/css"> </head> <body> <div></div> <div align="center"> <button>load More</button> <div><img src="ajax-loader.gif"> Loading...</div> </div> </body> </html> //config.inc.php <?php $db_username = 'root'; $db_password = ''; $db_name = 'dbpagenation'; $db_host = 'localhost'; $item_per_page = 5; $connecDB = mysqli_connect($db_host, $db_username, $db_password,$db_name)or die('could not connect to database'); ?> //fetch_pages.php <?php include("config.inc.php"); //include config file //sanitize post value $page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH); //throw HTTP error if page number is not valid if(!is_numeric($page_number)){ header('HTTP/1.1 500 Invalid page number!'); exit(); } //get current starting point of records $position = ($page_number * $item_per_page); //Limit our results within a specified range. $results = mysqli_query($connecDB,"SELECT id,name,message FROM paginate ORDER BY id DESC LIMIT $position, $item_per_page"); //output results from database echo '<ul>'; while($row = mysqli_fetch_array($results)) { echo '<liid"].'"><span>'.$row["id"].') '.$row["name"].'</span><span>'.$row["message"].'</span></li>'; } echo '</ul>'; ?> //style.css #results{ font: 12px Arial, Helvetica, sans-serif; width: 400px; margin-left: auto; margin-right: auto; } #results .loading-indication{ background:#FFFFFF; padding:10px; position: absolute; } .paginate { padding: 0px; margin: 0px; height: 30px; display: block; text-align: center; } .paginate li { display: inline-block; list-style: none; padding: 0px; margin-right: 1px; width: 30px; text-align: center; background: #4CC2AF; line-height: 25px; } .paginate .active { display: inline-block; list-style: none; padding: 0px; margin-right: 1px; width: 30px; text-align: center; line-height: 25px; background-color: #666666; } .paginate li a{ color:#FFFFFF; text-decoration:none; } .page_result{ padding: 0px; } .page_result li{ background: #E4E4E4; margin-bottom: 5px; padding: 10px; font-size: 12px; list-style: none; } .page_result .page_name { font-size: 14px; font-weight: bold; margin-right: 5px; } source : http://tutorial101.blogspot.com, http://twitter.com, http://tempo.co
0 comments:
Post a Comment