Home > Web Front-end > JS Tutorial > Jquery: Ajax realizes page turning without refreshing function code_jquery

Jquery: Ajax realizes page turning without refreshing function code_jquery

WBOY
Release: 2016-05-16 17:26:55
Original
1335 people have browsed it

Without further ado, just paste the code:
The following is the js part:

Copy the code The code is as follows:

var pageSize = "10";//Number of rows per page
var currentPage = "1";//Current page
var totalPage = "0";//Total number of pages
var rowCount = "0";//Total number of items
var params="";//Parameters
var url="activity_list.action";//action
$(document).ready(function( ){//The jquery code is loaded as the document is loaded
//Paging query
function queryForPages(){
$.ajax({
url:url,
type:'post ',
dataType:'json',
data:"qo.currentPage=" currentPage "&qo.pageSize=" pageSize params,
success:function callbackFun(data){
//Parse json
var info = eval("(" data ")");
//Clear data
clearDate();
fillTable(info);
}
});
}
//Fill data
function fillTable(info){
if(info.length>1){
totalPage = info[info.length-1].totalPage;
var tbody_content=""; //Do not initialize the string "", it will default to "undefined"
for(var i=0 ; itbody_content =" "" (i 1 (currentPage-1)*pageSize) ""
"" info[i].title.substr(0,20) ""
"" info[i].address.substr( 0,6) ""
"" info[i].quota_sign "人"
"" info[i].type ""
"Edit"
""
$("#t_body").html(tbody_content);
}
}else{
$("#t_head").html("");
$("#t_body") .html("
" info.msg "
");
}
}

//Clear data
function clearDate(){
$("#t_body").html("");
}

// Search activity
$("#searchActivity").click(function(){ queryForPages(); });
//Homepage
$("#firstPage").click(function(){
currentPage="1";
queryForPages();
});
//Previous page
$("#previous").click(function(){
if (currentPage>1){
currentPage-- ;
}
queryForPages();
});
//Next page
$("#next").click (function(){
if(currentPagecurrentPage ;
}
queryForPages();
});
//Last page
$(" #last").click(function(){
currentPage = totalPage;
queryForPages();
});

});

below It is the html code part:
Copy code The code is as follows:














serial number title
Location Registered Category Operation





Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template