jqGrid paging implementation code in jQuery_jquery

(1) Page code:

Copy code The code is as follows:

href="js/themes/basic/grid.css" />


< ;script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#myTab").jqGrid({
datatype: "json", // Change this to use JSON data
url:'DataServlet', //This is the request address of Action
mtype: 'POST',
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', //Paging toolbar
imgpath: 'js/themes/basic/images', //Image storage path
rowNum:10, //Number of records displayed on each page
viewrecords: true, //Whether to display the number of rows
rowList:[10,20,30], //The number of records displayed on each page can be adjusted
multiselect: false, //Whether multi-select is supported
caption: "Information display "
});
});

(2) The background servlet, the data inside is simulated

Copy code The code is as follows:

/**
* Servlet implementation class DataServlet
*/
public class DataServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}

/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
String page = request.getParameter("page"); // Get the current Number of pages, note that this is a parameter of jqgrid itself
String rows = request.getParameter("rows"); // Get the number of rows displayed on each page, note that this is a parameter of jqgrid itself
int totalRecord = 80; //Total number of records (should be obtained from the database, here is just 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); // Start the number of records
int pageSize = Integer.parseInt(rows);
// The following simulation constructs a JSON data object
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) {
}
}
}

Directory structure:

The effect displayed:

http://blog.csdn.net/polaris1119/archive/2010/01/04/5130974.aspx

http://d.download.csdn.net/down/1142295/ctfzh

http://hi.baidu.com/fangle_life/blog/item/1076b6fa85a9ba1c6d22eb1e.html

http://blog.csdn.net/polaris1119/archive/2010/01/12/5183327.aspx