Jquerypagination Paging plugin, AJAX request data from struts

Source: Internet
Author: User


Learned struts, did a small example of paging, using the jquery page plug-in pagination, first paste the plugin


Plug-in author for the parameter explanation is not enough detailed, pondering a half-day to understand how to use, not much to say, direct code

1. Client (JSP page)

1 /*these CSS in order to control the location of the generated data and the paging of the Li label*/2 a{3 text-decoration:None;4 Color:Black;5 Font-weight:Bold;6 text-align:Center;7}8 Table{9 width:500px;Ten Height:300px; One text-align:Center; A} - #table{ - position:relative; the Top:100px; -} - #page{ - Height:50px; + text-align:Center; - position:relative; + Top:100px; A} at #page Li{ - position:relative; -  Left:450px; -} -      - </style>
CSS Section
              <!--Be sure to introduce style sheets and JS files -    <Linkrel= "stylesheet"type= "Text/css"href= "Pagination/page.css">    <Scripttype= "Text/javascript"src= "Pagination/jquery.min.js"></Script>    <Scripttype= "Text/javascript"src= "Pagination/page.js"></Script>      
1      <div id= "table" align= "center" ></div> <!--to display the div--> of the data2<div id= "page" class= "page" ></div> <!--Div's class to be set into the introduced CSS file .page-->3   4<script type= "Text/javascript" >5                 varurl = "${pagecontext.request.contextpath}/show_list";6                 var$table = $ ("<table border= ' 2px ' id= ' a ' width= ' 300px ' height= ' 200px ' ></table>");7                 var$TR = $ ("<tr display= ' None ' ></tr>");8                 var$TD = $ ("<td> number </td><td> name </td><td> Salary </td><td> Department </td><td> Operation </td> ");9 $tr. Append ($TD);Ten $table. Append ($tr); One                 varDatas =NULL;//datas,options must be set as a global variable, found not set to global, can not use plug-ins A                 varOptions =NULL;  -                 varPagelistcount = 6;//number of data displayed per page -             //var maxentries = 50; The total amount of data to display, not delivered the $.ajax ({ - Url:url, -Type: "GET", -DataNULL, +DataType: "JSON", -Successfunction(backdata) { +Datas =Backdata; A                         varA =eval (backdata); atoptions={  -"id": "page",//----The element where the page number is displayed (where data is placed)----> div tag above -"Data":d Atas,//-----The returned data---->json form -"Maxshowpageitem": 10,//-----The maximum number of pages to display -"Pagelistcount":p Agelistcount,//-----shows the number of data per page, the following callback is the callback function of each page plug-in -"CallBack":function(Result) {//----result represents a well-handled set of data, such as if you set Pagelistcount to 6, then result has 6 data in$ ("#table"). Append ($table);  -                                 //traverse the generated table and insert the data to$.each (Result,function(index,emp) { +$TR = $ ("<tr></tr>"); - $table. Append ($tr); the                                          for(vari=0; i<=4; i++) { *$TD = $ ("<td></td>"); $ $tr. Append ($TD);Panax Notoginseng                                         } -                                         var$TR = $ ("Table TR"); the                                         //solve problems with multi-build tables---> Total 50, 6 per page, last page less than 6, this solves the problem of multi-generation table +                                         if($tr. Size () >result.length) { A$ ("Table tr:gt (" + result.length + ")"). Remove (); the                                         } -                                         var$TD = $tr. EQ (index+1). Find ("TD"); $                                         varinfo =$ (result). get (index); $                                         var$empId = $td. EQ (0). Text (info.empid); -                                         var$empName = $td. EQ (1). Text (info.empname) -                                         var$salary = $td. EQ (2). Text (info.salary); the                                         var$dept = $td. EQ (3). Text (info.dept.deptName); -                                         var$action = $td. EQ (4). HTML ("<a href=${update}?empid=" + info.empid+ "> Modify </a>&nbsp;&nbsp;<a id = ' Del "+ Info.empid +" ' href= ' # ' > Delete </a> ");Wuyi$ ("#del" + info.empid). Click (function () { the                                             if(Window.confirm ("OK to delete?!!! cannot be recovered after deletion")) { -$( This). attr ("href", "${delete}?empid=" +info.empid); Wu                                             } -                                         }) About                                     });  $                                 } -                             }; -Page.Init (datas.length,1,options);//perform paging, 1 indicates that the first page is displayed when loading is complete -                     } A                  });  +</script> the  -</body> $    the   

2. Server

Struts is used and the returned data is in JSON format, so the following jar files are introduced

Struts Section Commons-fileupload-1.2.2. jarcommons-io-2.0.1. jarcommons-lang3-3.1. Jarfreemarker-2.3.19. jarjavassist-3.11.0. GA.JAROGNL-3.0.5. jarstruts2-core- Jarxwork-core- Jarjson part Struts2 -json-plugin- Jarjson-lib-2.3-jdk15.jarcommons-beanutils-1.7.0. jarcommons -collections-3.1. Jarezmorph-1.0.3. Jarcommons-logging-1.1.1.jar
View Code

If you add a user library, be careful to deploy the jar package to Tomcat

Project (right-click)--->buildpath--->configure build path----> Search deployment Assembly--->add--->java build path Entries

Or put the jar package directly under Webroot and add it to the project (turn it into a bottle!!) can only)

How do I get struts to return JSON text?

1. Package Inherits Json-defaulT,

in 2.result type= "JSON" , the params writes the object to be converted

3.action Be sure to set the Get method for the object you want to convert, and the object you want to convert cannot be null!!

Configuration file

< Packagename= "xxxx"extends= "json-default">    <Actionname= "Show_*"class= "Employeeaction"Method= "{1}">           <resultname= "List"type= "JSON">                <paramname= "root">listemployees</param> <!--name= "root" to get root-level objects, specifically Baidu--           </result>    </Action>            


  private  list<employee>     Listemployees;  //  Just set the Get method  public  list<employee> Getlistemployees () { return   listemployees;  /**   * Employee List display *   @return  */ public  Span style= "COLOR: #000000" > String list () {listemployees   = Employeeservice.getall ();//Note Assignment  return  "list" ; }    

Of course, in addition to using struts to return to JSON can also write a servlet return data, specifically no longer repeat

I am a novice, many have insufficient also hope Haihan, criticize!!!

Jquerypagination Paging plugin, AJAX request data from struts

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.