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>

  • 相关阅读:
    终极调试工具EventRecorder使用方法,各种Link通吃
    stm32如何才能正常运行的调试笔记
    自己常用的vscode的插件备忘录
    linux下(lubuntu18.04.4)安装tinycc编译器及运行调试C语言
    虚拟机下的lubuntu14.04磁盘扩展
    使用lubuntu14.04编译ESP8266_NONOS_SDK3.0.0
    c语言中不建议使用的库函数
    RS485, RS422 and RS232连线
    Sql server output 功能介绍
    句子成分:主谓宾等
  • 原文地址:https://www.cnblogs.com/you-jia/p/6432246.html
Copyright © 2011-2022 走看看