jquery +ajax 分页实现

最新推荐文章于 2024-05-17 20:03:31 发布

chuanweigong2269

最新推荐文章于 2024-05-17 20:03:31 发布

阅读量357

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/conqueror/blog/3003142

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页</title>
    <script src="jquery.min.js"></script>
    <style>
        a{text-decoration: none}
        .content{width:1000px;margin:0 auto;padding-top:50px;}
        .left-col{float:left;width:700px}
        .right-col{float:right;width:300px}
        table{width:100%}
        table{border-collapse:collapse;border-spacing: 0}
        table tr{border:1px solid #ccc;height:30px;}
        table td{border:1px solid #ccc;}
        .pages{margin-top:20px;}
        .pages span.counts,.pages span.page{border:none;}
        .pages em{font-style: normal;margin:0 5px;}
        .pages span, .pages a{
            display:inline-block;
            margin-right:5px;
            height:28px;
            line-height:28px;
            padding:0 5px;
            min-width:20px;
          border:1px solid #ccc;
            text-align:center;
        }
        .pages .cur{
            background: #01AAED;
            color:#fff;
        }
        .pages .disabled{
            border:1px solid #ccc;
            color:#ccc;
            cursor: not-allowed!important;
        }
        .p-content{display:inline-block}
    </style>
</head>
<body>
  <div class="content">
      <div class="left-col">
          <table class="piclist">
              <thead>
              <tr>
                  <td>序号</td>
                  <td>图片名称</td>
              </tr>
              </thead>
              <tbody>
              </tbody>
          </table>
          <div class="pages">
              <span class="counts">共<em>50</em>条</span>
              <span class="page">共<em>50</em>页</span>
              <div class="p-content"></div>
              
          </div>
      </div>
      <div class="right-col">
          <img src="">
      </div>

  </div>
<script>
    $(function () {
        var _pages=0
        var _c=1;
        getdata(_c);

        function turnPage(cur){
            var count=_pages;
            var limit=4;
            var pages= Math.ceil(count/4);
            var _h="";
            var s="";
            var e="";
            var _t="";
            var c=parseInt(cur);
            if(pages==1){
                s="<a href='javascript:;' class='disabled'>"+"上一页"+"</a>";
                 e="<a href='javascript:;' class='disabled'>"+"下一页"+"</a>" ;
                _h=s+"<a href='javascript:;' class='cur'>"+pages+"</a>"+e;
            }else{
                if(cur==1){
                    s="<a href='javascript:;' class='disabled'>"+"上一页"+"</a>";
                    e= "<a href='javascript:;' data-p='"+(c+1)+"'>"+"下一页"+"</a>";
                }else if(cur==pages){
                    e="<a href='javascript:;' class='disabled'>"+"下一页"+"</a>" ;
                    s="<a href='javascript:;'  data-p='"+(cur-1)+"'>"+"上一页"+"</a>";
                } else{
                    s="<a href='javascript:;'  data-p='"+(cur-1)+"'>"+"上一页"+"</a>";
                    e= "<a href='javascript:;' data-p='"+ (c+1) +"'>"+"下一页"+"</a>";
                }
                for(var i=0;i<pages;i++){
                   if(cur==(i+1)){
                       _t+="<a href='javascript:;'class='cur' data-p='"+(i+1)+"'>"+(i+1)+"</a>"
                   }else{
                       _t+="<a href='javascript:;'data-p='"+(i+1)+"'>"+(i+1)+"</a>"
                   }
                }
                _h=s+_t+e;
                console.log()
            }

            $(".p-content").html(_h);
        };
      function getdata(curpage){
          $.ajax({
              type :"post",
              url :'json1.json',
              data:{
                  "curpage":curpage,
              },
              beforeSend:function(){
                  $(".piclist tbody").html("正在加载。。。")
              },
              success:function (res) {
                  $(".piclist tbody").find("*").remove();
                  var couts=res.datas.counts;
                  var listdata=res.datas.data;
                  var _html='';
                  for(var i=0;i<listdata.length;i++){
                      _html+= "<tr><td>"+listdata[i].id+"</td><td _href='"+listdata[i].url+"'>"+listdata[i].name+"</td></tr>";
                  }
                  $(".piclist tbody").html(_html);
                  $(".counts em").text(couts);
                  var _p= Math.ceil(couts/4);
                  $(".page em").text(_p);
                  _pages=couts;
              },
              complete:function () {
                  turnPage(curpage);
              }
          });
        };
        $(".pages .p-content").on('click','a',function () {
            var cur=$(this).attr("data-p");
            $(this).addClass("cur").siblings().removeClass("cur");
            getdata(cur)//cur 当前页
        })
    })
</script>
</body>
</html>