这篇文章主要为大家详细介绍了射流研究…实现前端分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了射流研究…实现前端分页效果的具体代码，供大家参考，具体内容如下
一、HTML部分
！文档类型超文本标记语言
超文本标记语言
头
meta charset='utf-8 '
脚本src=' js/jquery。js '/脚本
style type='text/css '
{文本装饰：无；}
表{ border-collapse:折叠；宽度：100%;字体大小：14px}
th { background-color:# DDD；}
表，td，th { border:1px solid # e7e 8 EC；}
th，tr { height:40px；}
td {文本对齐：居中；}
tr:hover { background-color:# f9f 4 F3；}。barcon {宽度：1000像素边距：0自动；文本对齐：居中；}。barcon 2 { float:右；}。barcon 2 ul { margin:20px 0；左填充：0;列表样式：无；文本对齐：居中；}。barcon 2 Li {显示：内嵌；}。barcon 2a { font-size:16px；字体粗细：正常；显示：内嵌-块；填充：5px填充顶部：0;颜色：黑色；边框：1px固体# ddd背景色：# fff}。barcon 2a:hover { background-color:# eee；}。班不透明度：4;}
/风格
/头
身体
表格宽度='950 '单元格填充='0 '单元格间距=' 0 ' class=' table 2 ' align=' center '
四羟乙基己二酰胺
tr align='居中'
th width=' 150 ' height=' 33 ' class=' td2 '序号/th
th width='300' class='td2 '用户名/th
th width='250' class='td2 '权限/th
th width='250' class='td2 '操作/th
/tr
/thead
tbody id='myTable '
tr align='居中'
TD class=' td2 ' height=' 33 ' width=' 150 ' 1/TD
td class='td2 '管理/td
td class='td2 '管理员/td
td class='td2' a href='### '修改/a/td
/tr
/tbody
/表格
div id='barcon' class='barcon '
div id='barcon2' class='barcon2 '
保险商实验所
lia href='###' id='prePage '上一页/a/李
李id=' barcon 1 '/李
lia href='###' id='nextPage '下一页/a/李
里输入类型='文本' id='数量'大小=' 2 ' oninput='value=value.replace(/[^\d]/g,'')'/li
lia href=' # # # ' id='跳转页面' onclick='跳转页面()'跳转/a/李
/ul
/div
/div
/body
/html
二、JS逻辑
脚本
//初始化数据
函数dynamicAddUser(数字){
for(var I=1；i=数字我)
{
var tr node=文档。createelement(' tr ')；
$(trNode).attr('align '，' center ')；
//序号
var tdNodeNum=document。createelement(“TD”)；
$(tdNodeNum).html(I 1)；
TD nodenum。风格。width=' 150 px
TD nodenum。风格。height=' 33px
TD nodenum。class name=' td2
//用户名
var TD节点名=文档。createelement(“TD”)；
$(tdNodeName).html(' lzj ' I)；
TD节点名。风格。width=' 300 px
TD节点名。class name=' td2
//权限
var tdNodePri=document。createelement(“TD”)；
tdnodepri。风格。width=' 250 px
tdNodePri.className=' td2
var priText=document。createelement(“span”)；
$(打印文本).css({'display':'inline-block '，' text-align ':' center ' })；
$(打印文本).文本('普通用户');
tdnodepri。appendchild(priText)；
//操作
var tdNodeOper=document。createelement(“TD”)；
tdno操作。风格。width=' 170 px
tdno操作。class name=' td2
var editA=文档。createelement(' a ')；
$(editA).attr('href '，' ### ').文本('编辑');
$(editA).CSS({ display:' inline-block ' })；
tdno操作。appendchild(editA)；
tr节点。appendchild(tdNodeNum)；
tr节点。appendchild(TD节点名)；
tr节点。appendchild(tdNodePri)；
tr节点。appendchild(tdNodeOper)；
$('#myTable')[0].appendChild(tr节点)；
}
}
$(function(){
dynamicAddUser(80)；
goPage(1，10)；
})
/**
* 分页函数
* pno -页数
* psize -每页显示记录数
* 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
*纯联署材料分页实质是数据行全部加载，通过是否显示属性完成分页功能
*/
var pagesize=10//每页显示行数
var currentPage_=1://当前页全局变量，用于跳转时判断是否在相同页，在就不跳，否则跳转。
var totalPage://总页数
函数goPage(pno，psize)>
可变=文档。getelement byid(' my table ')；
var num=ittable . rows . length://表格所有行数（所有记录数)
pagesize=psize//每页显示行数
//总共分几页
if(num/pageSize parseInt)
总页数=parse int(num/pagesize)1:
}否则
总页数=parse int(数量/页面大小):
}
var currentPage=pno://当前页数
当前页面_=当前页面：
var起始行=(当前页-1)*页大小1；
var endrow=当前页面*页面大小：
赋予=(赋予数量)？num:赋予；
$(# my table tr ').hide()；
for(var I=起始行-1)；伊德拉夫；>
$(# my table tr ').等式(一).show()；
}
var tempstr=当前页面'/'总页面；
文档。按id获取元素(“男爵1”).innerhtml=tempstr
if(当前第1页)}
$(#第一页).on('click '，function()=)
戈佩奇(1,心理学家);
}。删除类(‘班’)；
$(预付)。on('click '，function()=)
goPage(currentPage-1，psize)；
}。删除类(‘班’)；
}否则
$(#第一页).关闭('单击')。添加类(“ban”)；
$(预付)。关闭('单击')。添加类(“ban”)；
}
if(currentPagetotalPage)>
$('#nextPage ').on('click '，function()=)
goPage(目前的第一页，心理分析);
}。删除类(《班》)
$(' # last age ').on('click '，function()=)
戈佩奇(totalPage，psize)；
}。删除类(《班》)
}否则
$('#nextPage ').关闭('单击')。添加类(“ban”)；
$(' # last age ').关闭('单击')。添加类(“ban”)；
}
}
函数跳转页()
var num=parse int($ num).val()；
如果(数字！=currentPage_！isnan(num)num=num 0中的总页数
goPage(num，pageSize):
}
}
/脚本
效果如图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。