Jquery:ajax implementation page without refreshing function code _jquery

Not much to say, directly paste code:
Here is the JS section:

Copy Code code as follows:

var pageSize = "10";//number of rows per page
var currentpage = "1";//Current page
var totalpage = "0";//Total pages
var rowcount = "0";//total number of bars
var params= "";//Parameter
var url= "Activity_list.action";//action
$ (document). Ready (function () {//jquery code loaded with document loaded
Page-Search
function Queryforpages () {
$.ajax ({
Url:url,
Type: ' Post ',
DataType: ' JSON ',
Data: "qo.currentpage=" +currentpage+ "&qo.pagesize=" +pagesize+params,
Success:function Callbackfun (data) {
Parsing JSON
var info = eval ("+data+"));
Emptying data
Cleardate ();
Filltable (info);
}
});
}
Populating data
function Filltable (info) {
if (info.length>1) {
Totalpage = Info[info.length-1].totalpage;
var tbody_content= "";//Do not initialize string "", Default "undefined"
for (var i=0; i<info.length-1;i++) {
Tbody_content = "<tr>"
+ "&LT;TD data-title= ' serial number ' >" + (i+1+ (currentPage-1) *pagesize) + "</td>"
+ "<td data-title= ' title ' >" +info[i].title.substr (0,20) + "</td>"
+ "<td data-title= ' place ' >" +info[i].address.substr (0,6) + "</td>"
+ "<td data-title= ' has enrolled ' >" +info[i].quota_sign+ "Person </td>"
+ "<td data-title= ' category ' >" +info[i].type+ "</td>"
+ "<td data-title= ' operation ' ><a href= ' <%=request.getcontextpath ()%>/activity_edit.action?id=" +info[i].id + "' > Edit </a></td>"
+ "</tr>"
$ ("#t_body"). HTML (tbody_content);
}
}else{
$ ("#t_head"). HTML ("");
$ ("#t_body"). HTML ("<div style= ' height:200px;width:700px;padding-top:100px; ' align= ' center ' >" +info.msg+ ") </div> ");
}
}

Emptying data
function Cleardate () {
$ ("#t_body"). HTML ("");
}

Search activity
$ ("#searchActivity"). Click (function () {queryforpages ();});
Home
$ ("#firstPage"). Click (function () {
Currentpage= "1";
Queryforpages ();
});
Previous page
$ ("#previous"). Click (function () {
if (currentpage>1) {
currentpage--;
}
Queryforpages ();
});
Next page
$ ("#next"). Click (function () {
if (currentpage<totalpage) {
currentpage++;
}
Queryforpages ();
});
Last
$ ("#last"). Click (function () {
CurrentPage = Totalpage;
Queryforpages ();
});

});

Here is the HTML code section:

Copy Code code as follows:

<table class= "Table style-5" >
<thead id= "T_head" >
< tr>
<th> serial </th>
<th> title </th>
<th> location </th>
<th> signed </t h>
<th> category </th>
<th> operation </th>
</tr>
</thead>
<tbody I d= "T_body" >
<!--ajax populate list-->
</tbody>
</table>
<button id= "FirstPage" > Home </button>
<button id= "Previous" > Prev </button>
<button id= "Next" > next page </button >
<button id= "Last" > End </button>