实现Ajax分页

最新推荐文章于 2022-04-28 19:04:07 发布

原创最新推荐文章于 2022-04-28 19:04:07 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#eclipse

本文介绍了如何使用jQuery实现Ajax分页功能。通过监听页面加载事件，调用自定义的`myf`函数来处理分页操作。该函数根据传入的参数（首页、上一页、下一页、末页）更新当前页数，并使用`$.post`发送Ajax请求获取分页数据。接收到服务器返回的数据后，利用`split`方法解析数据，将JSON字符串转换为JavaScript对象数组，并动态构建表格展示商品信息。同时，更新最大页数并展示当前页数和总页数。

<script type="text/javascript" scr="js/jquery-3.3.1.js"></script>
   
   <script type="text/javascript">
   //页面载入函数
   $(function(){
       //默认显示第1页
       myf('a');
   })
   //扩大作用域
   var pageIndex;
   var max;
   //写一个方法专门控制分页
   function myf(type){
       if(type=='a'){
           //首页
           pageIndex=1;
       }
       else if(type=='b'){
           //上一页
           if(pageIndex>1){
               pageIndex--;
           }
           else{
               alert("兄die，已经是第一页了嘞");
           }
       }
       else if(type=='c'){
           //下一页
           if(pageIndex<max){
               pageIndex++;
           }
           else{
               alert("兄die，已经是最后一页了嘞");
           }
       }
       else{
           //末页
           pageIndex=max;
       }
       //ajax
       $.post("page.do", {pid:pageIndex}, function(data) {
           //用*分割
           var x=data.split("*");
           //x[0]代表json格式的对象数组字符串
           //x[1]代表max值
           //将json格式的对象数组字符串-->js的对象数组
           var ss=$.parseJSON(x[0]);
           //给max赋值
           max=parseInt(x[1]);
           var sb="<table border=\"1px\"><tr align='center'><td>商品序号</td><td>商品名称</td><td>商品图片</td></tr>";
           //循环遍历
           $.each(ss, function(i, g) {//下标，元素=对象
               sb+="<tr align='center'>";
               sb+="<td>"+g.gid+"</td>";
               sb+="<td>"+g.gname+"</td>";
               sb+="<td><img src='"+g.gpath+"'/></td>";
               sb+="</tr>";
           })
           sb+="</table>";
           sb+="["+pageIndex+"/"+max+"]";
           //给div赋值
           $("#aa").html(sb);
       })
   }
</script>