0

0

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

php中文网

php中文网

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

|

1405人浏览过

|

来源于php中文网

原创

  最近在接触jqueryajax,当前项目也会用到分页,为了用户体验更好一些,就准备用无刷新分页,这个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
    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 ;

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

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

    jquery ajax php+mysql 无刷新分页 详细实例jquery ajax php+mysql 无刷新分页 详细实例
    PHP速学教程(入门到精通)
    PHP速学教程(入门到精通)

    PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

    下载

    相关标签:

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    相关专题

    更多
    Word 字间距调整方法汇总
    Word 字间距调整方法汇总

    本专题整合了Word字间距调整方法,阅读下面的文章了解更详细操作。

    2

    2025.12.24

    任务管理器教程
    任务管理器教程

    本专题整合了任务管理器相关教程,阅读下面的文章了解更多详细操作。

    2

    2025.12.24

    AppleID格式
    AppleID格式

    本专题整合了AppleID相关内容,阅读专题下面的文章了解更多详细教程。

    0

    2025.12.24

    csgo视频观看入口合集
    csgo视频观看入口合集

    本专题整合了csgo观看入口合集,阅读下面的文章了知道更多入口地址。

    29

    2025.12.24

    yandex外贸入口合集
    yandex外贸入口合集

    本专题汇总了yandex外贸入口地址,阅读下面的文章了解更多内容。

    58

    2025.12.24

    添加脚注通用方法
    添加脚注通用方法

    本专题整合了添加脚注方法合集,阅读专题下面的文章了解更多内容。

    1

    2025.12.24

    重启电脑教程汇总
    重启电脑教程汇总

    本专题整合了重启电脑操作教程,阅读下面的文章了解更多详细教程。

    3

    2025.12.24

    纸张尺寸汇总
    纸张尺寸汇总

    本专题整合了纸张尺寸相关内容,阅读专题下面的文章了解更多内容。

    5

    2025.12.24

    Java Spring Boot 微服务实战
    Java Spring Boot 微服务实战

    本专题深入讲解 Java Spring Boot 在微服务架构中的应用,内容涵盖服务注册与发现、REST API开发、配置中心、负载均衡、熔断与限流、日志与监控。通过实际项目案例(如电商订单系统),帮助开发者掌握 从单体应用迁移到高可用微服务系统的完整流程与实战能力。

    1

    2025.12.24

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    jQuery 教程
    jQuery 教程

    共42课时 | 3.3万人学习

    HTML+CSS基础与实战
    HTML+CSS基础与实战

    共132课时 | 9.2万人学习

    tp6+adminlte搭建通用后台
    tp6+adminlte搭建通用后台

    共39课时 | 5.7万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号