jq 分页

最新推荐文章于 2022-07-27 22:02:45 发布

怕是不尽芳华

最新推荐文章于 2022-07-27 22:02:45 发布

阅读量723

点赞数

文章标签： javascript webview html

本文链接：https://blog.youkuaiyun.com/qq_41066340/article/details/123525754

版权

本文介绍如何利用jQuery库创建基本的分页功能，适用于Webview内的HTML页面。内容涵盖了分页的基本概念和时间控件Jedate的简单应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

仅基础功能搁一下

时间控件 jedate

    <!-- 分页 -->
    <div style="display:flex;justify-content:center;flex-direction:row;margin-top: 15px;" >
      <div style="border: black 1px solid;padding: 2px 6px;margin: 0 5px;" onclick="switchPage('up')">上一页</div>
      <div id="pages">
        <!-- <div class="pageN">1</div> -->
      </div>
      <div style="border: black 1px solid;padding: 2px 6px;margin: 0 5px;" onclick="switchPage('down')">下一页</div>
    </div>
  </div> 
</body>
<script type="text/javascript">
  var countNum = {$countNum};
  var countPage = Math.ceil(countNum/20)
  // console.log(countPage)
  var nowPage = {$nowPage};
  console.log('测试分页功能')
　fySet(countPage,nowPage)  // 当前页面记得改成动态

  // 分页
  function fySet(countPage,nowPage){
    // console.log(countPage)
    var fyHtml = ''
    for (var j = 1; j < countPage+1 ; j++) {
      if (j == nowPage) {
        fyHtml += '<div class="pageNSelect" onclick="switchPage(' + j +')">' + j + '</div>'
        continue;
      }
      if (j == 1 || j == countPage) {
        fyHtml += '<div class="pageN" onclick="switchPage(' + j +')">' + j + '</div>'
        continue;
      }
      // 中间
      if (j < countPage -1 && j >  nowPage +2) {
        if (j == nowPage +2+1) {
          // console.log('省略号')
          fyHtml += '<div>……</div>'
        }
        continue;
      }
      // 前
      if (j < nowPage -2) {
        if (j == 2) {
          fyHtml += '<div>……</div>'
        }
        continue;
      }
      // 后
      if (j > nowPage +2) {
        if (j == 118) {
          fyHtml += '<div>……</div>'
        }
        continue;
      }
      fyHtml += '<div class="pageN" onclick="switchPage(' + j +')">' + j + '</div>'
    }
    $("#pages").html(fyHtml);
  }
  function switchPage(who){
    // var nowPage = {$nowPage};
    if (who == 'up') {
      if (nowPage == 1) {
        console.log('已经第一页了')
        return false;
      }else{
        var goPage = nowPage-1
      }
    }else{
      if (who == 'down') {
        if (nowPage == countPage) {
          console.log('已经最后一页了')
          return false;
        }
        var goPage = nowPage+1
      }else{
        if (who == nowPage) {
          console.log('我是本页啦')
          return false;
        }
        var goPage = who
      }
    }
    console.log('去哪啊~',goPage)
    changeTable(goPage)
  }

  function changeTable(goPage){
    var timeSelect = $("#test11").val()
    console.log('现在时间啦：',timeSelect)
    // 请求对应表格数据
    $.ajax({
      type: "get",
      url: '__CONTROLLER__/oneTableData',
      data: {
          time : timeSelect,
          page: goPage ,  // 页码
      },
      dataType: "json",
      success: function(res){
        console.log('数据',res.data)
        var data = res.data
        $("#newData").empty();  // 删除子元素
        var html = "";
        for( var i = 0; i < data.length; i++ ) {
            html += "<tr>";
            html +=     "<td>" + data[i].gpdm + "</td>"
            html +=     "<td>" + data[i].gpjc + "</td>"
            html +=     "<td>" + data[i].zcl + "万</td>"
            html +=     "<td>" + data[i].ccsz + "万</td>"
            html +=     "<td>" + data[i].ccl + "%</td>"
            html +=     "<td>" + data[i].startTime + "</td>"
            html +=     "<td>" + data[i].endTime + "</td>"
            html += "</tr>";
        }
        $("#newData").html(html);
        // 分页部分
        var nowPage = res.nowPage
        // console.log(nowPage)
        fySet(countPage,nowPage);   
      }
    });
  }
</script>











  .pageN{
    border: black 1px solid;padding: 2px 6px;
    margin: 0 5px;
  }
  .pageNSelect{
    border: red 1px solid;
    padding: 2px 6px;
    margin: 0 5px;
    background-color: red;
    color: white;
  }
  #pages{
    display:flex;
    justify-content:center;
    flex-direction:row;
  }