zoukankan      html  css  js  c++  java
  • js分页代码

    //html代码

    <table class="gridtable" align="center" valign="center" id="fenye">
    <tr>
    <th width=600>单头</th>
    <th width=600>单头</th>
    </tr>


    @foreach($data as $_data)
    <tr class="test" style="display: none;">
    <td width=600>第一条</td>
    <td width=600>第一条数据</td>
    </tr>
    @endforeach

    </table>

    //js部分,可以自定义修改

    <script>

    var obj,j;
    var page=0;
    var nowPage=0;//当前页
    var listNum=20;//每页显示<ul>数
    var PagesLen;//总页数
    var PageNum=7;//分页链接接数(5个)
    onload=function(){
    obj=document.getElementById("fenye").getElementsByClassName("test");
    j=obj.length

    PagesLen=Math.ceil(j/listNum);
    upPage(0)
    }
    function upPage(p){
    nowPage=p
    //内容变换
    for (var i=0;i<j;i++){
    obj[i].style.display="none"
    }
    for (var i=p*listNum;i<(p+1)*listNum;i++){
    if(obj[i])obj[i].style.display="table-row"
    }
    //分页链接变换
    strS='<a href="###" onclick="upPage(0)">首页</a> '
    var PageNum_2=PageNum%2==0?Math.ceil(PageNum/2)+1:Math.ceil(PageNum/2)
    var PageNum_3=PageNum%2==0?Math.ceil(PageNum/2):Math.ceil(PageNum/2)+1
    var strC="",startPage,endPage;
    if (PageNum>=PagesLen) {startPage=0;endPage=PagesLen-1}
    else if (nowPage<PageNum_2){startPage=0;endPage=PagesLen-1>PageNum?PageNum:PagesLen-1}//首页
    else {startPage=nowPage+PageNum_3>=PagesLen?PagesLen-PageNum-1: nowPage-PageNum_2+1;var t=startPage+PageNum;endPage=t>PagesLen?PagesLen-1:t}
    for (var i=startPage;i<=endPage;i++){
    if (i==nowPage)strC+='<a href="###" style="color:red;font-weight:700;" onclick="upPage('+i+')">'+(i+1)+'</a> '
    else strC+='<a href="###" onclick="upPage('+i+')">'+(i+1)+'</a> '
    }
    strE=' <a href="###" onclick="upPage('+(PagesLen-1)+')">尾页</a> '
    strE2=nowPage+1+"/"+PagesLen+"页"+" 共"+j+"条"
    strE3 = ",成功"+{{$success}}+"条,失败<span style='color:red;font-weight:700;'>"+{{$fail}}+"</span>条"
    document.getElementById("changpage").innerHTML=strS+strC+strE+strE2+strE3
    }

    </script>

  • 相关阅读:
    机器学习第一练(铁达尼号罹难者预测)
    Codewars题记 :Find the missing letter
    Codewars题记 :Take a Ten Minute Walk
    Codewars题记 :Some numbers have funny properties.
    Codewars题记 :Count the number of Duplicates
    Java图片合成工具类
    解决Libreoffice在Linux服务器上,重启Tomcat但是Libreoffice8100端口还一直占用的问题
    Java对Linux进程关闭
    Java多张图片合成PDF
    java下载文件到本地磁盘
  • 原文地址:https://www.cnblogs.com/you-jia/p/6432246.html
Copyright © 2011-2022 走看看