Spring mvc + ajax paging, mvcajax

Spring mvc + ajax paging, mvcajax

The general idea of paging: each time the page uploads the current page to the background and obtains the json data transmitted from the background, the page is parsed and displayed on this page.

1. server code:

@ Controller
Public class MemcachedContrller {
@ Autowired
Private MemcacheReadService memcacheRead;

Private static final Logger LOG = Logger. getLogger (MemcachedContrller. class );

// Page Initialization
@ RequestMapping (value = "/memcached", method = {RequestMethod. GET, RequestMethod. POST })
Public ModelAndView memcachedDisplay (){
List. clear ();
GetMemcachedAll ();
Return new ModelAndView ("/memcached/memcachedShow ");
}

// Execute the previous page or next page
@ RequestMapping (value = "/memcached/h2", method = {RequestMethod. POST })
@ ResponseBody
Public List h2 (HttpServletRequest request,
HttpServletResponse response) throws Exception {
String dt = request. getParameter ("dt ");
Int current = Integer. parseInt (dt );
Return result (current );
}

// Executed during page refresh
@ RequestMapping (value = "/memcached/h3", method = {RequestMethod. POST })
@ ResponseBody
Public List h3 (HttpServletRequest request,
HttpServletResponse response) throws Exception {
String dt = request. getParameter ("dt ");
Int current = Integer. parseInt (dt );
// System. out. println (dt );
List. clear (); // clear all data in the Set
GetMemcachedAll (); // get the latest memcached data
Return result (current );
}

List list = new ArrayList ();

// Obtain memcached data
Public List getMemcachedAll (){
/* For (int I = 0; I <10000; I ++ ){
JsonData p = new JsonData ();
P. setGIX_X ("a" + I );
P. setId ("1" + I );
P. setGIY_Y ("a_ B" + I );
List. add (p );
}
Return list ;*/
Map <String, String> data = memcacheRead. read ();
Set <String> set = data. keySet ();
Iterator iter = set. iterator ();
Int I = 0;
List list = new ArrayList ();
While (iter. hasNext ()){
String key = (String) iter. next ();
If (memcacheRead. get (key )! = Null ){
/* If (I = 5) break;
I = I + 1;
System. out. println (key); // get the key
System. out. println (get (key); // obtain the value corresponding to the key in the cache */
If (I = 100) break;
I = I + 1;
String [] strSplit = memcacheRead. get (key). toString (). split ("--");
JsonData p = new JsonData ();
P. setGIX_X (strSplit [0]);
P. setId (key );
P. setGIY_Y (strSplit [1]);
List. add (p );
}
}
Return list;
// Return memcacheRead. getAllValue ();
}

// Process the result set and return it
Public List result (int dt ){
Int pageSize = 40;
ArrayList list2 = new ArrayList ();
Page pg = new Page (list. size (), dt, pageSize );
PageMessage pm = new PageMessage ();
Pm. setPagecount (pg. getPagecount ());
If (dt <pg. getPagecount ()){
For (int I = (dt-1) * 40; I <dt * 40; I ++ ){
List2.add (list. get (I ));
}}
Else {
For (int I = (dt-1) * 40; I <list. size (); I ++ ){
List2.add (list. get (I ));
}
}
List2.add (pm );
Return list2;
}





}

2. Front-end code:

MorePage.css

Body {
Font-size: 18px;
Text-align: 30%;
}
Table {
Border-collapse: collapse;
}
Li {
List-style: none;
Border: 1px solid;
Width: 20px;
Height: 20px;
Text-align: center;
Margin: 5px;
Padding: 2px;
Float: left;
Cursor: pointer;
}
# DataDisplay {
Margin-left: 30%;
Margin-top: 20px;
}

Js:

Var current = 0;
Var t = 0;
Function test2 (dt ){
Window. t = dt;
$. Ajax ({
Url: "/bdms-web/memcached/h2? Dt = "+ dt,
Type: 'post ',
DataType: 'json ',
Timeout: 2000,
Cache: false,
Error: function (resultData ){
Alert ("xml ");
},


Success: function (resultData ){

ShowPage (resultData, dt );
}
})}


Function update (dt ){
// Window. t = dt;
$. Ajax ({
Url: "/bdms-web/memcached/h3? Dt = "+ dt,
Type: 'post ',
DataType: 'json ',
Timeout: 2000,
Cache: false,
Error: function (resultData ){
Alert ("xml ");
},


Success: function (resultData ){

ShowPage (resultData, dt );
}
})}






Function showPage (resultData, dt ){
Var fristpagehtml;
Var prevpagehtml;
Var nextpagehtml;
Var lastpagehtml;
Var gopagehtml;
Var length = resultData. length;
Var t = resultData [length-1]. pagecount;
Gopagehtml = "<input id = 'edit _ count' size = '4' type = 'text'/> <input type = 'tagstone value = 'Go' onclick = 'test3 (); '/> ";

Fristpagehtml = "<a onclick = 'test2 (" + (0 + 1) + "); 'href = 'javascript: void (0 ); '> homepage </a> ";
If (dt-0) <= 1 ){
Prevpagehtml = "<a> previous page </a> ";
} Else {
Prevpagehtml = "<a onclick = 'test2 (" + (dt-1) + "); 'href = 'javascript: void (0); '> previous page </a> ";
}
If (dt-0) <(t-0 )){
Nextpagehtml = "<a onclick = 'test2 (" + (dt-0 + 1) + "); 'href = 'javascript: void (0 ); '> next page </a> ";
} Else {
Nextpagehtml = "<a> next page </a> ";
}

Lastpagehtml = "<a onclick = 'test2 (" + t + "); 'href = 'javascript: void (0); '> not displayed </a> ";

Var html = "<table border = 1px style = 'font-size: 12px; color: red; text-align: center '> <tr> <td width = '000000'> ID </td> <td width = '000000'> GIX_X </td> <td width = '000000'> GIX_Y </td> </tr> ";
For (var I = 0; I <resultData. length-1; I ++ ){

Html = html + "<tr> <td>"
+ ResultData [I]. id + "</td> <td>"
+ ResultData [I]. GIX_X + "</td> <td>"
+ ResultData [I]. GIY_Y
+ "</Td> </tr> ";
}
Html = html + "<tr> <td colspan = 3 text-align = center>" + fristpagehtml + "& nbsp" + prevpagehtml + "& nbsp" +" total "+ resultData [length-1]. pagecount + "Page & nbsp; current "+ dt +" page "+" & nbsp "+ nextpagehtml +" & nbsp "+ lastpagehtml +" & nbsp "+ gopagehtml +" </ td> </tr> ";
Html = html + "</table> ";
Document. getElementById ("div"). innerHTML = html;

}


Function test3 (){
Var str = document. getElementById ("edit_count"). value;
Test2 (str );
}
SetInterval ('Update (window. t) ', 1000*10 );
/* Function tt ()
{
Alert ("hello ");

}
SetInterval ('tt () ', 1000*15 );*/
// SetTimeout ('tt () ', 15000 );

Jsp:

MemcachedShow. jsp

<% @ Page language = "java" contentType = "text/html; charset = UTF-8"
PageEncoding = "UTF-8" %>
<% @ Taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>


<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> Insert title here </title>
<Link rel = "stylesheet" type = "text/css" href = "<c: url value ="/style/css/morePage.css "/>"/>
<Script type = "text/javascript" src = "<c: url value ="/js/jquery. js "/>"> </script>
<Script type = "text/javascript" src = "<c: url value ="/js/jquery. min. js "/>"> </script>
<Script type = "text/javascript" src = "<c: url value ="/js/AjaxPage. js "/>"> </script>
<! -- <Script type = "text/javascript" src = "/script/AjaxPage. js"> </script> -->
</Head>
<Body onload = 'test2 (1) '>
<! -- <P style = "text-align: center"> <input type = "button" size = "10" value = "Submit" onclick = "validate (); "/> </p> -->
<Center>
<Div id = "div"> </div>
</Center>
<! -- <Form action = "update" method = "post"> <input type = "submit" value = "xml generation"> </form> -->


</Body>
</Html>

Page effect:

Simulate background data:

// Obtain memcached data
Public List getMemcachedAll (){
For (int I = 0; I <10000; I ++ ){
JsonData p = new JsonData ();
P. setGIX_X ("a" + I );
P. setId ("1" + I );
P. setGIY_Y ("a_ B" + I );
List. add (p );
}
Return list;

}