原生JQUERY html5 分页

<!DOCTYPE html>
<html><head><title>JqueryPage.html</title><script src="js/jquery.js"></script><script type="text/javascript">var pageSize = 15;   //每页显示的记录条数var curPage     = 0;    //当前页var lastPage;        //最后页dvar page =    0;       //方向var totalRows;       //总行数var totalPage;       //总页数var begin;var end;$(document).ready(function display(){   totalRows =$("#mytable tr").length - 1;    // 求这个表的总行数，剔除第一行列头totalPage=totalRows % pageSize==0 ? totalRows/pageSize : Math.floor(totalRows/pageSize)+1;//根据记录条数，计算页数// alert("totalPage==="+totalPage);curPage=1;    // 设置当前为第一页displayPage(1);//显示第一页document.getElementById("currPage").innerHTML="当前 " + curPage + "/" + totalPage + " 页    每页 ";    // 显示当前多少页document.getElementById("tatalrow").innerHTML="数据总量 " + totalRows + "";            // 显示数据量document.getElementById("pageSize").value = pageSize;$("#fristPage").click(function firstPage(){    // 首页curPage=1;page = 0; displayPage();});$("#upPage").click(function frontPage(){    // 上一页page=-1;displayPage();});$("#nextPage").click(function nextPage(){    // 下一页page=1; displayPage();});$("#lastPage").click(function lastPage(){    // 尾页curPage=totalPage;page = 0;displayPage();});$("#goto").click(function changePage(){    // 转页curPage=document.getElementById("changePage").value * 1;if (!/^[1-9]\d*$/.test(curPage)) {//alert("请输入正整数");return ;}if (curPage > totalPage) {// alert("超出数据页面");return ;}page = 0;displayPage();});$("#pageSizeSet").click(function setPageSize(){    // 设置每页显示多少条记录pageSize = document.getElementById("pageSize").value;    //每页显示的记录条数if (!/^[1-9]\d*$/.test(pageSize)) {// alert("请输入正整数");return ;}totalRows =$("#mytable tr").length - 1;totalPage=totalRows % pageSize==0 ? totalRows/pageSize : Math.floor(totalRows/pageSize)+1;//根据记录条数，计算页数curPage=1;        //当前页page=0;        //方向});});function displayPage(){if(curPage <=1 && page==-1){page=0;//alert("已经是第一页了");return;} else if (curPage >= totalPage && page==1) {page=0;// alert("已经是最后一页了");return ;}lastPage = curPage;// 修复当totalRows=1时，curPage计算得0的bugif (totalRows > pageSize) {curPage = ((curPage + page + totalRows) % totalRows);} else {curPage = 1;}document.getElementById("currPage").innerHTML="当前 " + curPage + "/" + totalPage + " 页    每页 ";        // 显示当前多少页begin=(curPage-1)*pageSize + 1;// 起始记录号end = begin + 1*pageSize - 1;    // 末尾记录号if(end > totalRows ) end=totalRows;$("#mytable tr").hide();                // 首先，设置这行为隐藏$("#mytable tr").each(function(i){    // 然后，通过条件判断决定本行是否恢复显示if((i>=begin && i<=end) || i==0 )//显示begin<=x<=end的记录$(this).show();});}</script></head><body><a id="currPage"></a><input id="pageSize" type="text" size="1" maxlength="2" value="getDefaultValue()"/><a> 条 </a> <a href="#" id="pageSizeSet">设置</a> <a id="tatalrow"></a> <a  href="#" id="fristPage">首页</a><a  href="#" id="upPage">上一页</a><a  href="#" id="nextPage">下一页</a><a  href="#" id="lastPage">尾页</a> <a>转到 </a><input id="changePage" type="text" size="1" maxlength="4"/><a>页 </a><a  href="#" id="goto">跳转</a><table id="mytable" align="center" class="table table-hover table-condensed table-bordered"><tr><th>哈哈哈</th><th>哈哈哈</th><th>哈哈哈</th><th>哈哈哈</th><th>哈哈哈</th><th>哈哈哈</th></tr><tr><td>123456</td><td>123456</td><td>123456</td><td>123456</td><td>123456</td><td>123456</td></tr><tr><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td></tr><tr><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>2234567</td></tr><tr><td>4</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td></tr><tr><td>5</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td></tr><tr><td>6</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td></tr><tr><td>7</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td></tr><tr><td>8</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td></tr><tr><td>9</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td></tr><tr><td>10</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td></tr><tr><td>11</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td></tr><tr><td>12</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td></tr><tr><td>13</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td></tr><tr><td>14</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td></tr><tr><td>15</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td></tr><tr><td>16</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td><td>2234567</td></tr></table></body>
</html>

原生JQUERY html5 分页相关推荐

Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html> <html lang="en"> ...
java ajax jquery分页插件_分享精心挑选的12款优秀jQuery Ajax分页插件和教程
摘要:这篇jQuery栏目下的"分享精心挑选的12款优秀jQuery Ajax分页插件和教程",介绍的技术点是"jquery_ajax分页插件.jquery_ajax.a ...
jquery 3D分页翻转滑块
jquery 3D分页翻转滑块,jquery分页,jquery插件,jquery,3D翻转,css3分页,360度旋转,网页特效代码3D分页翻转滑块是一款使用网格样式与滑块效果分页的特效. 转载于:h ...
Jquery的分页插件
Jquery的分页插件, 用起来还不错. 来自: http://flaviusmatis.github.io/simplePagination.js/ 下载地址: https://github.com ...
jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
HTML鼠标点击文字语音播放,10款jQuery+HTML5实现的鼠标点经过播放音频
1.jQuery/CSS3带未读提醒的垂直菜单这是一款基于jQuery和CSS3的垂直动画菜单,这款jQuery菜单的特点是菜单整体悬浮在一张大气的背景图片上,很有立体的视觉效果.其次这款菜单带有信 ...
炫酷实用 7款jQuery/HTML5图片应用
2019独角兽企业重金招聘Python工程师标准>>> jQuery非常强大,我们这里有很多关于jQuery焦点图的插件,今天我们精选了7款利用jQuery和HTML5实现的超炫酷图 ...
Jquery自定义分页插件
效果: 核心代码: 自定义Jquery插件grid.js //Jquery自定义分页插件 (function($) {$.fn.grid= function(options) {var objGrid ...

原生JQUERY html5 分页

原生JQUERY html5 分页相关推荐

最新文章

热门文章