Example of non-refreshing paging Code implemented by ajax,

Example of non-refreshing paging Code implemented by ajax,

Example of non-refreshing paging Code implemented by ajax:
Now I want to focus on Refreshing everything, even paging. Below is a piece of refreshing code from the network, hoping to help you.
The Code is as follows:
I. HTML code:

 

<Table class = "table style-5"> <thead id = "t_head"> <tr> <th> NO. </th> <th> title </th> <th>> location </th> <th> registered </th> <th> Category </th> <th> operation </th> </tr> </thead> <tbody id = "t_body"> <! -- Ajax fill list --> </tbody> </table> <button id = "firstPage"> homepage </button> <button id = "previous"> previous page </button> <button id = "next"> next page </button> <button id = "last"> last page </button>

 

Ii. ajax code:

Var pageSize = "10"; // The number of lines per page var currentPage = "1"; // var totalPage = "0" on the current page "; // total number of pages var rowCount = "0"; // total number of pages var params = ""; // parameter var url = "activity_list.action"; // action $ (document ). ready (function () {// jquery code loads as the document is loaded // query function queryForPages () by PAGE {$. 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 = ""; // No initialization string "", "undefined" for (var I = 0; I <info. length-1; I ++) {tbody_content + = "<tr>" + "<td data-title = 'sequence number '>" + (I + 1 + (currentPage-1) * pageSize) + "</td>" + "<td data-title = 'title'>" + info [I]. title. subs Tr (0, 20) + "</td>" + "<td data-title = 'location'>" + info [I]. address. substr () + "</td>" + "<td data-title = 'registered '>" + 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>") ;}// 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 (currentPage <totalPage) {currentPage ++;} queryForPages () ;}); // The last page $ ("# last "). click (function () {currentPage = totalPage; queryForPages ();});});

The original address is: http://www.softwhy.com/forum.php? Mod = viewthread & tid = 8824.

For more information, see: http://www.softwhy.com/jquery/