js分页之前端代码实现和请求处理
程序员文章站
2022-05-26 08:13:52
分页之js前端实现和请求处理代码，供大家参考，具体内容如下
index.html
分页之js前端实现和请求处理代码，供大家参考，具体内容如下
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
<link rel="stylesheet" href="css/public.css" charset='utf-8'>
</head>
<body>
<div class='box'>
<h2>
<span>编号</span>
<span>姓名</span>
<span>性别</span>
<span>分数</span>
</h2>
<ul class='con' id='content'>
<li>
<span>1</span>
<span>xxx</span>
<span>男</span>
<span>90</span>
</li>
</ul>
<div class='page' id='page'>
<span>first</span>
<span>prev</span>
<ul class='pagenum' id='pagenum'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<span>next</span>
<span>last</span>
<input type="text" id='numinp' value='1'/>
</div>
</div>
<script src='js/ajax.js'></script>
<script>
var pagemodule = (function(){
//获取需要操作的dom元素
var content = document.getelementbyid('content'),
page = document.getelementbyid('page'),
pagenum = document.getelementbyid('pagenum'),
numinp = document.getelementbyid('numinp');
//设定当前也和总页数及本次请求的数据
var n = 1,total = 0,data = null;
//实现页面数据绑定及其他数据的绑定
function bindhtml(){
//content bind
var str = '';
for(var i = 0;i<data.length;i++){
var curdata = data[i];
str+='<li studentid="'+curdata["id"]+'">';
str+='<span>'+curdata["id"]+'</span>';
str+='<span>'+curdata["name"]+'</span>';
str+='<span>'+(curdata["sex"]==1 ? "女" : "男")+'</span>';
str+='<span>'+curdata["score"]+'</span>';
str+='</li>';
}
content.innerhtml = str;
//page bind
str = '';
for(i = 1;i<=total;i++){
if(i===n){
str+='<li class="bg">'+i+'</li>';
continue;
}
str+='<li>'+i+'</li>';
}
pagenum.innerhtml = str;
//numinp bind
numinp.value = n;
}
//事件委托实现分页区域的按钮操作 给文本框enter键绑定操作
function bindevent(){
page.onclick = function(e){
e = e || window.event;
var tar = e.target || e.srcelement
tartag = tar.tagname.touppercase(),
tarinn = tar.innerhtml;
if(tartag==="span"){
if(tarinn==="first"){
if(n===1){
return;
}
n = 1;
}
if(tarinn==="last"){
if(n === total){
return;
}
n = total;
}
if(tarinn==="prev"){
if(n === 1){
return;
}
n--;
}
if(tarinn==="next"){
if(n === total){
return;
}
n++;
}
}
if(tartag==="li"){
if(n === parsefloat(tarinn)){
return;
}
n = parsefloat(tarinn);
}
//input
if(tartag==="input"){
return;
}
//重新发送请求
sendajax()
}
numinp.onkeyup = function(e){
e = e || window.event;
if(e.keycode===13){//enter键
var val = parsefloat(this.value.replace(/^ +| +$/,''));
if(isnan(val)){
this.value = n;
return;
}
val = math.round(val)
if(val<1){
n = 1;
}else if(val>total){
n = total;
}else{
n = val;
}
sendajax();
}
}
}
//content区域的li跳转事件
function bindlink(){
var olis = content.getelementsbytagname('li');
for(var i = 0;i<olis.length;i++){
olis[i].onclick = function(){
// window.location.href = "detail.html";
//在跳转的时候还需要把当前点击学员得id传到详情页面
window.open("detail.html?id="+this.getattribute('studentid'));
}
}
}
function sendajax(){
ajax({
url:"/getlist?n="+n,
success:function(jsondata){
if(jsondata && jsondata.code===0){
total = jsondata["total"];
data = jsondata['data'];
bindhtml();
bindlink();
}
}
})
}
//模块入口
function init(){
sendajax();
bindevent();
}
return {
init:init
}
})()
pagemodule.init();
</script>
</body>
</html>
detail.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
<link rel="stylesheet" href="css/public.css" charset='utf-8'>
</head>
<body>
<ul class='box2' id='box2'>
<li>
<span>编号</span>
<span>4</span>
</li>
<li>
<span>姓名</span>
<span>xxx</span>
</li>
<li>
<span>性别</span>
<span>男</span>
</li>
<li>
<span>分数</span>
<span>99</span>
</li>
</ul>
<script src='js/ajax.js'></script>
<script>
string.prototype.queryurlparameter = function(){
//parameter
var obj = {},
reg = /([^?=]+)=([^?=]+)/g;
this.replace(reg,function(){
var key = arguments[1],
value = arguments[2];
obj[key] = value;
});
//->hash
// reg = /#([^?=]+)/;
// if (reg.test(this)) {
// obj['hash'] = reg.exec(this)[1];
// }
return obj;
}
var detailmoduel = (function(){
var data = null,urlid = window.location.href.queryurlparameter().id,obox = document.getelementbyid('box2');
function bindhtml(){
var str = "";
str+="<li><span>编号</span><span>"+data["id"]+"</span></li>";
str+="<li><span>编号</span><span>"+data["name"]+"</span></li>";
str+="<li><span>编号</span><span>"+(data["sex"]==1 ? "男" : "女")+"</span></li>";
str+="<li><span>编号</span><span>"+data["score"]+"</span></li>";
obox.innerhtml = str;
}
function init(){
ajax({
url:"/getinfo?id="+urlid,
success:function(jsondata){
if(jsondata && jsondata.code===0){
data = jsondata["data"];
bindhtml();
}
}
})
}
return {
init:init
}
})()
detailmoduel.init();
</script>
</body>
</html>
最终效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。