javascript - how to reload data without refreshing page with pagination -
i have code below, , im trying update data without refreshing page pagination. have tried many thing taken stackoverflow not succeeded.
php--
<?php $auth_id = mysql_real_escape_string($_get['id']); $auths_id = mysql_real_escape_string($_get['id']); /** * @link: http://www.awcore.com/dev */ //connect database include_once ('db/config_books.php'); //get function include_once ('includes/function_ulema.php'); $page = (int) (!isset($_get["page"]) ? 1 : $_get["page"]); $limit = 5; $startpoint = ($page * $limit) - $limit; //to make pagination $statement = "books b left outer join authors_compile_rel ar on (b.id = ar.book_id) b.status = 1 , ( b.auth_id = '".$auth_id."' or b.t_auth_id = '".$auth_id."' or ar.auth_id = '".$auth_id."' )"; ?> <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>pagination</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="css/pagination_ulema.css" rel="stylesheet" type="text/css" /> <link href="css/grey_ulema.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .records { width: 510px; margin: 5px; padding:2px 5px; border:1px solid #b6b6b6; } .record { color: #474747; margin: 5px 0; padding: 3px 5px; background:#e6e6e6; border: 1px solid #b6b6b6; cursor: pointer; letter-spacing: 2px; } .record:hover { background:#d3d2d2; } .round { -moz-border-radius:8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius:8px; } </style> </head> <body> <div class="records round"> <?php //show records $query = mysql_query(" select b.id, b.unique_name, b.native_name, b.auth_id, b.status, b.create_date, ar.auth_id books b left outer join authors_compile_rel ar on (b.id = ar.book_id) b.status = 1 , ( b.auth_id = ".$auth_id." or b.t_auth_id = ".$auth_id." or ar.auth_id = ".$auth_id." ) order b.id desc limit {$startpoint} , {$limit}"); while ($row = mysql_fetch_assoc($query)) { ?> <div class="record round"><?php echo $row['id']; echo " - "; echo $row['unique_name']; ?></div> <?php } ?> </div> <?php echo pagination($statement,$limit,$page); ?> </body> </html> and have function file of pagination below:
<?php $auth_id = mysql_real_escape_string($_get['id']); $auths_id = mysql_real_escape_string($_get['id']); /** * @link: http://www.awcore.com/dev */ function pagination($query, $per_page = 10,$page = 1, $url = '?' ){ $query = "select count(*) `num` {$query}"; $row = mysql_fetch_array(mysql_query($query)); $total = $row['num']; $auth_ids = $row['auth_id']; $adjacents = "2"; $page = ($page == 0 ? 1 : $page); $start = ($page - 1) * $per_page; $prev = $page - 1; $next = $page + 1; $lastpage = ceil($total/$per_page); $lpm1 = $lastpage - 1; $pagination = ""; if($lastpage > 1) { $pagination .= "<ul class='pagination'>"; $pagination .= "<li class='details'>page $page of $lastpage</li>"; if ($lastpage < 7 + ($adjacents * 2)) { ($counter = 1; $counter <= $lastpage; $counter++) { if ($counter == $page) $pagination.= "<li><a class='current'>$counter</a></li>"; else $pagination.= "<li><a href='{$url}page=$counter&id={$_get['id']}'>$counter</a></li>"; } } elseif($lastpage > 5 + ($adjacents * 2)) { if($page < 1 + ($adjacents * 2)) { ($counter = 1; $counter < 4 + ($adjacents * 2); $counter++) { if ($counter == $page) $pagination.= "<li><a class='current'>$counter</a></li>"; else $pagination.= "<li><a href='{$url}page=$counter&id={$_get['id']}'>$counter</a></li>"; } $pagination.= "<li class='dot'>...</li>"; $pagination.= "<li><a href='{$url}page=$lpm1&id={$_get['id']}'>$lpm1</a></li>"; $pagination.= "<li><a href='{$url}page=$lastpage&id={$_get['id']}'>$lastpage</a></li>"; } elseif($lastpage - ($adjacents * 2) > $page && $page > ($adjacents * 2)) { $pagination.= "<li><a href='{$url}page=1&id={$_get['id']}'>1</a></li>"; $pagination.= "<li><a href='{$url}page=2&id={$_get['id']}'>2</a></li>"; $pagination.= "<li class='dot'>...</li>"; ($counter = $page - $adjacents; $counter <= $page + $adjacents; $counter++) { if ($counter == $page) $pagination.= "<li><a class='current'>$counter</a></li>"; else $pagination.= "<li><a href='{$url}page=$counter&id={$_get['id']}'>$counter</a></li>"; } $pagination.= "<li class='dot'>..</li>"; $pagination.= "<li><a href='{$url}page=$lpm1&id={$_get['id']}'>$lpm1</a></li>"; $pagination.= "<li><a href='{$url}page=$lastpage&id={$_get['id']}'>$lastpage</a></li>"; } else { $pagination.= "<li><a href='{$url}page=1&id={$_get['id']}'>1</a></li>"; $pagination.= "<li><a href='{$url}page=2&id={$_get['id']}'>2</a></li>"; $pagination.= "<li class='dot'>..</li>"; ($counter = $lastpage - (2 + ($adjacents * 2)); $counter <= $lastpage; $counter++) { if ($counter == $page) $pagination.= "<li><a class='current'>$counter</a></li>"; else $pagination.= "<li><a href='{$url}page=$counter&id={$_get['id']}'>$counter</a></li>"; } } } if ($page < $counter - 1){ $pagination.= "<li><a href='{$url}page=$next&id={$_get['id']}'>next</a></li>"; $pagination.= "<li><a href='{$url}page=$lastpage&id={$_get['id']}'>last</a></li>"; }else{ $pagination.= "<li><a class='current'>next</a></li>"; $pagination.= "<li><a class='current'>last</a></li>"; } $pagination.= "</ul>\n"; } return $pagination; } ?> please me integration of javascript load data pagination without refreshing page.
what looking called ajax. take here: http://www.w3schools.com/ajax/ajax_intro.asp when user clicks on next page catch action js , push selected page ajax script calculates offset new data load. answer looking or looking code?
Comments
Post a Comment