和php结合实现分页js代码,JavaScript分页功能的前端代码实现和请求处理详解

这篇文章主要为大家详细介绍了js分页之前端代码实现和请求处理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

分页之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();

最终效果图：