前端<tr>分页实现

来源：互联网发布：宜宾县网络电视台编辑：程序博客网时间：2024/06/05 11:18

本代码为前台数据分页效果，不需要执行后台代码

用法超级简单，小白也会用，把div块（按钮内容）粘贴到你的代码中，然后把脚本贴到代码里，最后把你的表格名称添加一个id属性即可。

原理是对目标表格中的<tr>标签进行分页，后台只需要把数据传过来遍历即可。

效果如图：

只需要设置格式为如下即可

<table  id="tableTest">    <s:iterator value="" var="">   <tr>       <td>你要遍历的内容</td>   </tr></s:iterator></table>

jsp部分例子

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><table border="1" width="600px;" align="center"  id="tableTest"><tr><td>id</td><td>学生姓名</td><td>课程名称</td><td>课程成绩</td><td>操作</td></tr><c:forEach items="${scoreListAll}" var="sc" varStatus="status"> <tr><td>${status.index+1}</td><td>${sc.stuname}</td><td>${sc.coursename}</td><td>${sc.score}</td><td>[<a href="toAddScore.htm">添加</a>][<a href="toUpdateScore.htm?scid=${sc.scid}">修改</a>][<a href="deleteScore.htm?scid=${sc.scid}">删除</a>]</td></tr></c:forEach></table>  <div style="text-align:center;margin-top:30px;">        <span id="spanFirst">第一页</span>             <span id="spanPre">上一页</span>             <span id="spanNext">下一页</span>             <span id="spanLast">最后一页</span>                     第<span id="spanPageNum"></span>页/                共<span id="spanTotalPage"></span>页    </div>   <script>  /* 作者：落尘曦博客地址：http://blog.csdn.net/qq_23994787/article/details/76652666*/var theTable = document.getElementById("tableTest"); //要进行分页的表格 var spanFirst = document.getElementById("spanFirst");  //第一页     var spanPre = document.getElementById("spanPre");     //上一页      var spanNext = document.getElementById("spanNext");   //下一页        var spanLast = document.getElementById("spanLast");  //最后一页    var pageNum = document.getElementById("spanPageNum"); //当前页          var totalPage = document.getElementById("spanTotalPage");  //总页数               var numberRowsInTable = theTable.rows.length;    //table中<tr>的数量      var pageSize = 10;     //一页中数据显示的数量     var page = 1;     //         //下一页       function next(){           hideTable();  //隐藏所有表格行                    var currentRow = pageSize * page;    //(计算开始从哪里开始显示)得到当前页的前所有行数         var maxRow = currentRow + pageSize;  //(计算开始从哪里开始停止显示)得到当前页前的总行数加一页行数              if ( maxRow > numberRowsInTable ) maxRow = numberRowsInTable;  //越界则改为最大行数         for ( var i = currentRow; i< maxRow; i++ ){  //将区间内的<tr>样式改为可见             theTable.rows[i].style.display = '';           }           page++;           if ( maxRow == numberRowsInTable ) { //当前行数是否到达最大行数    nextText(); //下一页文本    lastText(); //最后一页文本    }                    preLink();      //上一页链接      firstLink(); //第一页链接    showPage(); //当前页数}               //上一页       function pre(){                 hideTable();           page--;           var currentRow = pageSize * page;      //(计算开始从哪里开始显示)得到当前页的前所有行数      var maxRow = currentRow - pageSize;   //(计算开始从哪里开始停止显示)得到要显示页的行数       if ( currentRow > numberRowsInTable ) currentRow = numberRowsInTable;    //博客地址：http://blog.csdn.net/qq_23994787/article/details/76652666    for ( var i = maxRow; i< currentRow; i++ ){    //修改区间的内容为可见          theTable.rows[i].style.display = '';           }           if ( maxRow == 0 ){ //当前行数是否为开始    preText(); //上一页文本    firstText(); //第一页文本    }                     nextLink();    //下一页链接       lastLink();   //最后一页链接    showPage();  //当前页数}            //第一页       function first(){           hideTable();           page = 1;           for ( var i = 0; i<pageSize; i++ ){               theTable.rows[i].style.display = '';           }     //博客地址：http://blog.csdn.net/qq_23994787/article/details/76652666    firstText();//第一页文本     preText();     //上一页文本       nextLink();    //下一页链接        lastLink();  //最后一页链接     showPage(); //显示页数 }                 //最后一页       function last(){           hideTable();           page = pageCount();           var currentRow = pageSize * (page - 1);           for ( var i = currentRow; i<numberRowsInTable; i++ ){               theTable.rows[i].style.display = '';           }           firstLink();    //第一页链接    preLink();      //上一页链接     nextText(); //下一页文本    lastText();//最后一页文本    showPage(); //当前页数      }               //隐藏表格中所有行function hideTable(){           for ( var i = 0; i<numberRowsInTable; i++ ){               theTable.rows[i].style.display = 'none';           }       }       //显示页数  function showPage(){           pageNum.innerHTML = page;       }             //总共页数       function pageCount(){           var count = 0;           if ( numberRowsInTable%pageSize != 0 ) count = 1;            return parseInt(numberRowsInTable/pageSize) + count;       }    //显示按钮内容       function preLink(){ spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>";}       function preText(){ spanPre.innerHTML = "上一页";  }             function nextLink(){ spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>";}       function nextText(){ spanNext.innerHTML = "下一页"; }             function firstLink(){ spanFirst.innerHTML = "<a href='javascript:first();'>第一页</a>"; }       function firstText(){ spanFirst.innerHTML = "第一页"; }             function lastLink(){ spanLast.innerHTML = "<a href='javascript:last();'>最后一页</a>"; }       function lastText(){ spanLast.innerHTML = "最后一页"; }             //隐藏表格       function hide(){ //博客地址：http://blog.csdn.net/qq_23994787/article/details/76652666    for ( var i = pageSize; i<numberRowsInTable; i++ ){               theTable.rows[i].style.display = 'none';           }           totalPage.innerHTML = pageCount();           pageNum.innerHTML = '1';               nextLink();           lastLink();       }             hide();</script>  </body></html>

英文标签 -------------------与上无关

<div style="text-align:center;margin-top:30px;">  <span id="spanFirst">First Page</span>         <span id="spanPre">Page UP</span>         <span id="spanNext">Page Down</span>         <span id="spanLast">Last Page</span>         The<span id="spanPageNum"></span>/  <span id="spanTotalPage"></span>Page    </div>

//显示按钮内容         function preLink(){ spanPre.innerHTML = "<a href='javascript:pre();'>Page UP</a>";}         function preText(){ spanPre.innerHTML = "Page UP";  }                 function nextLink(){ spanNext.innerHTML = "<a href='javascript:next();'>Page Down</a>";}         function nextText(){ spanNext.innerHTML = "Page Down"; }                 function firstLink(){ spanFirst.innerHTML = "<a href='javascript:first();'>First Page</a>"; }         function firstText(){ spanFirst.innerHTML = "First Page"; }                 function lastLink(){ spanLast.innerHTML = "<a href='javascript:last();'>Last Page</a>"; }         function lastText(){ spanLast.innerHTML = "Last Page"; }

阅读全文

0 0