这篇文章主要为大家详细介绍了射流研究…实现前端分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了射流研究…实现前端分页效果的具体代码，供大家参考，具体内容如下

！文档类型超文本标记语言

超文本标记语言

头

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

脚本

//初始化数据

函数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):

}

}

/脚本

效果如图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。