主要是借鉴了网上一个例子，修改了一些小地方，前端分页的技巧，表格的数据是已经写好了，可以前端渲染表格然后再分页，都是可以的。
其实分页最关键是这两句：
var startRow = (currentPage - 1) pageSize+1; //currentPage 为当前页，pageSize为每页显示的数据量
var endRow = currentPage pageSize;
找到我们需要显示的行的范围（starRow~endRow）
ps:这里在跳转的时候遇到了一个小BUG，就是获取到的select的value值是string类型的，比如获取到了1，然后你想再加1的时候就会变成"11" 而不是我们想要的"2"，所以这里需要用parseInt( )来转换一下，小细节需要注意呀！！！
效果图：
[javascript] view plain copy print
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<style type="text/css">
a{
text-decoration: none;
}
table2{
border:#C8C8C8 solid;
border-width:1px 0px 0px 1px;
background: #F3F0F0;
margin-top:25px;
}
td0{
border:#C8C8C8 solid;
border-width:0 0 1px 0;
}
td2{
border:#C8C8C8 solid;
border-width:0 1px 1px 0 ;
}
barcon {
width: 1000px;
margin: 0 auto;
text-align: center;
}
barcon1 {
font-size: 17px;
float: left;
margin-top: 20px;
}
barcon2 {
float: right;
}
barcon2 ul {
margin: 20px 0;
padding-left: 0;
list-style: none;
text-align: center;
}
barcon2 li {
display: inline;
}
barcon2 a {
font-size: 16px;
font-weight: normal;
display: inline-block;
padding: 5px;
padding-top: 0;
color: black;
border: 1px solid #ddd;
background-color: #fff;
}
barcon2 a:hover{
background-color: #eee;
}
ban {
opacity: 4;
}
</style>
</head>
<body>
<table width="950" cellpadding="0" cellspacing="0" class="table2" align="center">
<thead>
<tr>
<td colspan="3" height="33" class="td0"> </td>
<td align="center" class="td2"><a href="###">添加用户</a></td>
</tr>
<tr align="center">
<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="adminTbody">
<tr align="center">
<td class="td2" height="33" width="150">1</td>
<td class="td2" >admin</td>
<td class="td2" >管理员</td>
<td class="td2" ><a href="###">修改</a></td>
</tr>
</tbody>
</table>
<div id="barcon" class="barcon" >
<div id="barcon1" class="barcon1"></div>
<div id="barcon2" class="barcon2">
<ul>
<li><a href="###" id="firstPage">首页</a></li>
<li><a href="###" id="prePage">上一页</a></li>
<li><a href="###" id="nextPage">下一页</a></li>
<li><a href="###" id="lastPage">尾页</a></li>
<li><select id="jumpWhere">
</select></li>
<li><a href="###" id="jumpPage" onclick="jumpPage()">跳转</a></li>
</ul>
</div>
</div>
<script src="jqueryjs"></script>
<script>
/动态生成用户函数
num为生成的用户数量
/
function dynamicAddUser(num){
for(var i=1;i<=num;i++)
{
var trNode=documentcreateElement("tr");
$(trNode)attr("align","center");
//序号
var tdNodeNum=documentcreateElement("td");
$(tdNodeNum)html(i+1);
tdNodeNumstylewidth = "150px";
tdNodeNumstyleheight = "33px";
tdNodeNumclassName = "td2";
//用户名
var tdNodeName=documentcreateElement("td");
$(tdNodeName)html("lzj"+i);
tdNodeNamestylewidth = "300px";
tdNodeNameclassName = "td2";
//权限
var tdNodePri=documentcreateElement("td");
tdNodePristylewidth = "250px";
tdNodePriclassName = "td2";
var priText=documentcreateElement("span");
$(priText)css({"display":"inline-block","text-align":"center"});
$(priText)text("普通用户");
tdNodePriappendChild(priText);
// *** 作
var tdNodeOper = documentcreateElement("td");
tdNodeOperstylewidth = "170px";
tdNodeOperclassName = "td2";
var editA = documentcreateElement("a");
$(editA)attr("href", "###")text("编辑");
$(editA)css({ display: "inline-block" });
tdNodeOperappendChild(editA);
trNodeappendChild(tdNodeNum);
trNodeappendChild(tdNodeName);
trNodeappendChild(tdNodePri);
trNodeappendChild(tdNodeOper);
$("#adminTbody")[0]appendChild(trNode);
}
}
$(function(){
dynamicAddUser(80);
goPage(1,10);
var tempOption="";
for(var i=1;i<=totalPage;i++)
{
tempOption+='<option value='+i+'>'+i+'</option>'
}
$("#jumpWhere")html(tempOption);
})
/
分页函数
pno--页数
psize--每页显示记录数
分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
/
var pageSize=0;//每页显示行数
var currentPage_=1;//当前页全局变量，用于跳转时判断是否在相同页，在就不跳，否则跳转。
var totalPage;//总页数
function goPage(pno,psize){
var itable = documentgetElementById("adminTbody");
var num = itablerowslength;//表格所有行数(所有记录数)
pageSize = psize;//每页显示行数
//总共分几页
if(num/pageSize > parseInt(num/pageSize)){
totalPage=parseInt(num/pageSize)+1;
}else{
totalPage=parseInt(num/pageSize);
}
var currentPage = pno;//当前页数
currentPage_=currentPage;
var startRow = (currentPage - 1) pageSize+1;
var endRow = currentPage pageSize;
endRow = (endRow > num) num : endRow;
//遍历显示数据实现分页
/for(var i=1;i<(num+1);i++){
var irow = itablerows[i-1];
if(i>=startRow && i<=endRow){
irowstyledisplay = "";
}else{
irowstyledisplay = "none";
}
}/
$("#adminTbody tr")hide();
for(var i=startRow-1;i<endRow;i++)
{
$("#adminTbody tr")eq(i)show();
}
var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
documentgetElementById("barcon1")innerHTML = tempStr;
if(currentPage>1){
$("#firstPage")on("click",function(){
goPage(1,psize);
})removeClass("ban");
$("#prePage")on("click",function(){
goPage(currentPage-1,psize);
})removeClass("ban");
}else{
$("#firstPage")off("click")addClass("ban");
$("#prePage")off("click")addClass("ban");
}
if(currentPage<totalPage){
$("#nextPage")on("click",function(){
goPage(currentPage+1,psize);
})removeClass("ban")
$("#lastPage")on("click",function(){
goPage(totalPage,psize);
})removeClass("ban")
}else{
$("#nextPage")off("click")addClass("ban");
$("#lastPage")off("click")addClass("ban");
}
$("#jumpWhere")val(currentPage);
}
function jumpPage()
{
var num=parseInt($("#jumpWhere")val());
if(num!=currentPage_)
{
goPage(num,pageSize);
}
}
</script>
</body>
</html>
/
@see 鼠标点击拖拽的效果(页面可以同时拖动多个框)
@param boxId 整个对象(框)的id(一般为div或table)
@param event 内置对象(必须传入)
/
function mousePlead1(event, boxId) {
var o = getO(boxId);
var isIE = documentall true : false;
var e = event;
var x = eoffsetX || elayerX;
var y = eoffsetY || elayerY;
documentonmousemove = function(e) {
ostylefilter = 'Alpha(opacity=70)';
ostyleopacity = '07';
if (isIE) {
osetCapture();
} else {
windowcaptureEvents(EventMOUSEMOVE);
}
var e = windowevent || e;
if (eclientX - x >= 0 && eclientY - y >= 0 && eclientX - x <= getWinSize()[0] - getO(boxId)offsetWidth
&& eclientY - y <= getWinSize()[1] - getO(boxId)offsetHeight) {
ostyleleft = (eclientX - x) + "px";
ostyletop = (eclientY - y) + "px";
}
};
documentonmouseup = function(e) {
documentonmousemove = function() {
};
if (isIE) {
oreleaseCapture();
} else {
windowreleaseEvents(oMOUSEMOVE);
}
ostylefilter = "";
ostyleopacity = "";
};
}
/
@see 获得对象
@param id 对象的id(表单元素和其他标签都可以)
@return Object
/
function getO(id) {
return documentgetElementById(id);
}
/
@see 获得当前窗体的大小(width,height)
@return Array
/
function getWinSize() {
var width = parseInt(documentdocumentElementclientWidth);
var height = parseInt(documentdocumentElementclientHeight);
return new Array(width, height);
}
<input type="range">
<div style="height:20px;background:red"></div>
<script>
documentquerySelector("input")onchange = () => {
documentquerySelector("div")styleopacity = documentquerySelector("input")value / 100
}
</script>
如果你只是要给某元素设置透明度，那么只要定义该元素的样式_filter:alpha(opacity=80); opacity: 08;就行了（这里的80和08指的是透明度为80%，根据需要自己设置），跟js无关。
如果你是要用js改变元素透明度，那么如下例
例：documentgetElementById("id1")style="_filter:alpha(opacity=80); opacity: 08;";
其中documentgetElementById("id1")是获取id为id1的元素，根据需要自己替换
以上就是关于js的分页原理以及实现步骤是什么全部的内容，包括:js的分页原理以及实现步骤是什么、js怎样获取对象id值、用js如何制作一个进度条用来改变背景图片的透明度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）