| The code is as follows: | Copy code |
| <! 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" media = "screen" Href = "js/themes/basic/grid.css"/> <Script type = "text/javascript" src = "js/jquery. js"> </script> <Script type = "text/javascript" src = "js/jquery. jqGrid. js"> </script> <Script type = "text/javascript"> JQuery (document). ready (function (){ JQuery ("# myTab"). jqGrid ({// myTab: The table id mounted to the data Datatype: "json", // use JSON data here Url: 'dataservlet', // This is the data request address. Height: 250, Width: 400, ColNames: ['Number', 'name', 'phone'], ColModel :[ {Name: 'id', index: 'id', width: 60, sorttype: "int "}, {Name: 'name', index: 'name', width: 90 }, {Name: 'phone', index: 'phone', width: 100} ], Pager: 'pager', // pager toolbar, pager: the id of the paging DIV Imgpath: 'JS/themes/basic/images ', // path for storing images RowNum: 10, // number of records per page Viewrecords: true, // whether to display the number of rows RowList: [, 30], // you can adjust the number of records displayed on each page Multiselect: false, // whether multiple selections are supported Caption: "Information Display" }); }); </Script> </Head> <Body> <Table id = "myTab" class = "scroll" cellpadding = "0" cellspacing = "0"> </table> <Div id = "pager" class = "scroll"> </div> </Body> </Html> |
|
The data in the backend servlet is simulated.
Java code
| The code is as follows: | Copy code |
| Public class DataServlet extends HttpServlet { Private static final long serialVersionUID = 1L; Protected void doGet (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub } Protected void doPost (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String page = request. getParameter ("page"); // Obtain the current page number. Note that this is a parameter of jqgrid. String rows = request. getParameter ("rows"); // Obtain the number of lines displayed on each page. Note that this is the jqgrid parameter. Int totalRecord = 80; // The total number of records (it should be obtained according to the database. Here it is only a simulation) Int totalPage = totalRecord % Integer. parseInt (rows) = 0? TotalRecord /Integer. parseInt (rows): totalRecord/Integer. parseInt (rows) + 1; // calculate the total number of pages Try { Int index = (Integer. parseInt (page)-1) * Integer. parseInt (rows); // number of start Records Int pageSize = Integer. parseInt (rows ); // Simulate JSON data object construction String json = "{total:" + totalPage + ", page:" + page + ", Records:" + totalRecord + ", rows :["; For (int I = index; I <pageSize + index & I <totalRecord; I ++ ){ Json + = "{cell: ['id" + I + "', 'name" + I + "', 'phone" + I + "']}"; If (I! = PageSize + index-1 & I! = TotalRecord-1 ){ Json + = ","; } } Json + = "]}"; Response. getWriter (). write (json); // return JSON data to the page } Catch (Exception ex ){ } } } |
|
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
