jquery ajax php+mysql 无刷新分页 详细实例

jquery ajax php+mysql 无刷新分页 详细实例

　　最近在接触jquery和ajax，当前项目也会用到分页，为了用户体验更好一些，就准备用无刷新分页，这个demo很适合新手学习查看，写的比较清晰，话不多说，直接上代码吧。

　　首先是html页面，index.html，代码如下：

 
 
 
  
 php+mysql+ajax+jquery分页
 
 
 
 
 
 
 
     
      
 
 
     
 
 
 
 
 
     
 
 
 
 
 
 
     
 
 
     
 
 
 
 
 
 
 
 
 
 
 
 
 
     
 
 
 
 
 
 
 
 
 
 
 
 
 
     
 
 
 
 
     
 
 
     
 
 
 
 
     
 
 
     
 
 
 
 
 
 
 
 
     
         
         
         
         
         
         
             
         
     
 
 

 

　　样式我随便写的，毕竟我样式写的很差，大家可以自己换样式的。

　　然后就是js代码了，ajaxPager.js，代码如下：

　　

  curPage = 1; 
  
           type: 'POST'         url: 'pages.php'         data: {'pageNum':page-1         dataType:'json'         beforeSend:             $("#loading").html("<img id='loadin'g src='loading.gif'>"          success:             $("#loading").html(""             $("#list ul"             total = json.total; 
             pageSize = json.pageSize; 
             curPage = page; 
             totalPage = json.totalPage; 
              li = ""              list =             $.each(list,(index,array){ 
                 li += "<li><a href='#'><img src='"+array['pic']+"'></a><p>"+array['title'].substring(0,10)+"</p></li>"              $("#list ul"          complete:(){ 
           error:             alert("数据加载失败"    
 
      
     (curPage>totalPage) curPage=     
     (curPage<1) curPage=1     pageStr = "<span class=''>共"+total+"条"+curPage+"/"+totalPage+"</span>"     
     
     (totalPage<=4          (curPage==1             pageStr += "<span class='cur'>1</span>"             ( i=2;i<=totalPage;i++                  pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>"          }             pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>"             ( i=1;i<=totalPage;i++                  (i==                      pageStr += "<span class='cur'>"+i+"</span>"
                  
                      pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>"               
       
          (curPage<=3             (curPage==1                  pageStr += "<span class='cur'>1</span>"              
                  pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>"                 pageStr += "<span class='cur'><a href='javascript:void(0)' rel='1'>1</a></span>"              ( i=2;i<=4;i++                  (i==                      pageStr += "<span class='cur'>"+i+"</span>"
                  
                      pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>"               pageStr += "<span class='cur'>...</span>"         }             pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>"             pageStr += "<span class='cur'>...</span>"             (curPage>totalPage-2                  ( i=totalPage-2;i<=totalPage;i++                      (i==                          pageStr += "<span class='cur'>"+i+"</span>"
                      
                          pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>"                
                  pageStr += "<a href='javascript:void(0)' rel='"+(curPage-1)+"'>"+(curPage-1)+"</a>"                 pageStr += "<span class='cur'>"+curPage+"</span>"                 pageStr += "<a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>"+(parseInt(curPage)+1)+"</a>"                 pageStr += "<span class='cur'>...</span>"        
     (curPage>=         
     }         pageStr += "<a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>></a><a href='javascript:void(0)' rel='"+totalPage+"'>>></a>"          
     $("#pagecount"  
 $(     getData(1     $("#pagecount  a").live('click',          rel = $().attr("rel"             });

 

　　因为项目的需要，我这个页面页数显示只能显示几页，比如就这样 <<   <  ... 5 6 7 ... >  >>，要改显示的，就在ajaxPager.js里面改。

　　$.ajax({ 中url: 'pages.php'，处理就在pages.php中处理。那么就来看看pages.php中的代码：

　　

 <? ('connect.php' 
  = (['pageNum' 
  = ("select id from food"  = ();
 
  = 8; 
  = (/); 
 
  = * ['total'] =  ['pageSize'] =  ['totalPage'] =   = ("select id,title,pic from food order by id asc limit ," (=(      ['list'][] =           'id' => ['id'],
         'title' => ['title'],
         'pic' => ['pic'],
   
  json_encode( ?>

 

　　上面当然还有数据库连接了啦，这个应该很简单吧，还是贴出来connect.php：

　　

 <? ('connect.php' 
  = (['pageNum' 
  = ("select id from food"  = ();
 
  = 8; 
  = (/); 
 
  = * ['total'] =  ['pageSize'] =  ['totalPage'] =   = ("select id,title,pic from food order by id asc limit ," (=(      ['list'][] =           'id' => ['id'],
         'title' => ['title'],
         'pic' => ['pic'],
   
  json_encode( ?>

 

　　然后就完成了，具体思路很清晰，点击页数的时候jquery获取rel中的页面值，传进去数据库获取相应数据展现在页面上。

　　然后还有数据库吧，我的表示这样的：

1 CREATE TABLE IF NOT EXISTS `food` (
2   `id` int(11) NOT NULL AUTO_INCREMENT,
3   `title` varchar(100) NOT NULL,
4   `pic` varchar(255) NOT NULL,
5   PRIMARY KEY (`id`)
6 ) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=31 ;

 我这边有一个demo，然后大家可以下载看看。多多指教。

http://pan.baidu.com/share/link?shareid=1518322039&uk=67299903