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

php中文网

发布时间：2016-06-13 11:31:00

1405人浏览过

来源于php中文网

原创

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

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

 
 
 
  
 php+mysql+ajax+jquery分页
 
 
 
 
 
 
 
     
      
 
 
     
 
 
 
 
 
     
 
 
 
 
 
 
     
 
 
     
 
 
 
 
 
 
 
 
 
 
 
 
 
     
 
 
 
 
 
 
 
 
 
 
 
 
 
     
 
 
 
 
     
 
 
     
 
 
 
 
     
 
 
     
 
 
 
 
 
 
 
 
     
         <

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

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

立即学习“PHP免费学习笔记（深入）”；

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

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

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

MyMap AI

使用AI将想法转化为图表

下载

  ('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 ;