Ajax + smarty technology to achieve no additional paging, ajaxsmarty
The Smarty template is used here to make it easier
The main technologies in this article are AJAX, PHP, and Smarty. In addition, they encapsulate a very simple class.
Class:
(Function () {function $ (id) {return document. getElementById (id);} $. init = function () {try {return new XMLHttpRequest ();} catch (e) {}; try {return new ActiveXObject ('Microsoft. XMLHTTP ');} catch (e) {}alert ('change the browser');} $. get = function (url, data, callback, type) {var xhr = this. init (); url + = '? '+ New Date (). getTime (); if (data! = Null) {url + = '&' + data;} xhr. open ('get', url); xhr. onreadystatechange = function () {if (xhr. readyState = 4 & xhr. status = 200) {if (type = null) {callback (xhr. responseText);} if (type = 'text') {callback (xhr. responseText);} if (type = 'xml') {callback (xhr. responseXML);} if (type = 'json') {callback (eval ("(" + xhr. responseText + ")") ;}} xhr. send (null) ;}$. post = function (url, data, callback, type) {var xhr = this. init (); xhr. open ('post', url); xhr. setRequestHeader ('content-type', 'application/x-www-form-urlencoded'); xhr. onreadystatechange = function () {if (xhr. readyState = 4 & xhr. status = 200) {if (type = null) {callback (xhr. responseText);} if (type = 'text') {callback (xhr. responseText);} if (type = 'xml') {callback (xhr. responseXML);} if (type = 'json') {callback (eval ("(" + xhr. responseText + ")") ;}}; xhr. send (data );}
Class is very simple.
HTML:
window.onload=function () {init(2);}function del(id,p){$.get('del.php','id='+id,function(msg){if(msg==1){init(p);}})}function init(p) {$.get('page.php','page='+p,function(msg){$('result').innerHTML=msg;});}PHP:<?phpheader('content-type:text/html;charset=utf-8');mysql_connect('localhost','root','root');mysql_select_db('db2');mysql_query('set names utf8');$re=mysql_query('select count(*) as num from catgory');$hang=mysql_fetch_assoc($re);$row1=$hang['num'];$page=isset($_GET['page'])? $_GET['page']:1;$pagesize=2;$total=ceil($row1/$pagesize);$prev=$page-1;$next=$page+1;if($prev<1){$prev=1;}if($next>$total){$next=$total;}$offset = ($page-1)*$pagesize;$result=mysql_query("select * from catgory limit ".$offset.','.$pagesize);$ct=mysql_num_rows($result);$data=array();for($i=0;$i<$ct;$i++){$r=mysql_fetch_assoc($result);$data[]=$r;}include('libs/Smarty.class.php');$Smarty=new Smarty();$Smarty->assign('data',$data);$Smarty->assign('page',$page);$Smarty->assign('pagesize',$pagesize);$Smarty->assign('total',$total);$Smarty->assign('prev',$prev);$Smarty->assign('next',$next);$Smarty->assign('row1',$row1);$str=$Smarty->fetch('page.html');echo $str;
Smarty:
<Table border = "1" rules = "all" width = "600"> <tr> <td> NO. </td> <td> brand </td> <td> pid </td> <td> Delete </td> </tr> {foreach from = $ data item = 'value'} <tr> <td> {$ value [' id'] }</td> <td >{$ value ['name'] }</td> <td >{$ value ['pid ']} </td> <td> <a href = "#", onclick = "del ({$ value ['id']}, {$ page }) "> Delete </td> </tr> {/foreach} <tr> <td colspan =" 3 "> page {$ total} in total
To introduce a smary Template
The above is a small series of Ajax + smarty technology introduced to you to achieve no refreshing pages, I hope to help you!
Articles you may be interested in:
- Php ajax supports id locating without refreshing new pages
- Jquery plug-in web2.0 split page script, which can be used for ajax without refreshing pages
- JS + Ajax + Jquery implement the implementation of refreshing pages and grouping
- JQuery Pagination Ajax paging plug-in (no refreshing or delay during paging switching)
- Example code of JQuery + Ajax without refreshing pagination
- Implementation of smarty simple Paging