分页之js前端实现和请求处理代码,供大家参考,具体内容如下
index.html
Document编号
姓名
性别
分数
1
xxx
男
90
FIRST
PREV
- 1
- 2
- 3
- 4
- 5
NEXT
LAST
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
var curData = data[i];
str+='
';str+=''+curData["id"]+'';
str+=''+curData["name"]+'';
str+=''+(curData["sex"]==1 ? "女" : "男")+'';
str+=''+curData["score"]+'';
str+='';
}
content.innerHTML = str;
//page bind
str = '';
for(i = 1;i<=total;i++){
if(i===n){
str+='
'+i+'';continue;
}
str+='
'+i+'';}
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[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();
detail.html
Document编号
4
姓名
xxx
性别
男
分数
99
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+="
编号 "+data["id"]+"";str+="
编号 "+data["name"]+"";str+="
编号 "+(data["sex"]==1 ? "男" : "女")+"";str+="
编号 "+data["score"]+"";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();
最终效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源:php中文网