如何在jqgrid中显示多个页面？

问题描述：

我正在读取cassandra数据库中的数据并显示在jqGrid中。但它在所有页面上显示相同的记录。我使用的代码http://javahunter.wordpress.com/2010/12/07/jqgrid-example/如何在jqgrid中显示多个页面？

这是我的JSP文件 -

enter code here 

<!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>JQGrid Special</title>     
<!-- JAVASCRIPT FILES --> 
<script src="thirdparty/jqgrid/jquery-1.3.1.js" type="text/javascript"></script> 
<script src="thirdparty/jqgrid/jquery-ui-1.7.2.custom.min.js" type="text/javascript">     
</script> 

<script src="thirdparty/jqgrid/jquery.layout.js" type="text/javascript"></script> 
<script src="thirdparty/jqgrid/i18n/grid.locale-en.js" type="text/javascript"></script> 
<script src="thirdparty/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script> 
<script src="thirdparty/jqgrid/jquery.tablednd.js" type="text/javascript"></script> 
<script src="thirdparty/jqgrid/jquery.contextmenu.js" type="text/javascript"></script> 

<script src="thirdparty/jQueryPlugins/jQueryJsonPlugin/jquery.json-2.2.js"  
type="text/javascript"></script> 


<script src="js/guestUser.js" type="text/javascript"></script> 
<script src="js/modifyForm.js" type="text/javascript"></script> 
<script src="js/addForm.js" type="text/javascript"></script> 
<script src="js/commonFunctions.js" type="text/javascript"></script> 
<script src="js/deleteRow.js" type="text/javascript"></script> 
<script src="thirdparty/genPassword.js" type="text/javascript"></script> 

<script src="thirdparty/jQueryPlugins/jQueryValidationplugin/jquery.validate.js" 
type="text/javascript"></script> 
<script src="thirdparty/jQueryPlugins/jQueryValidationplugin/jquery.validationEngine.js"  
type="text/javascript"></script> 
<script src="thirdparty/jQueryPlugins/jQuerycustomalertsPlugin/jquery.alerts.js" 
type="text/javascript"></script> 
<script 
src="thirdparty/jQueryPlugins/jQuerytextLimiterPlugin/jquery.inputlimiter.1.1.1.js" 
type= "text/javascript"></script> 

<!-- CSS FILES --> 
<link rel="stylesheet" type="text/css" media="screen" 
href="thirdparty/jQueryPlugins/jQuerycustomalertsPlugin/jquery.alerts.css" /> 
<link rel="stylesheet" type="text/css" media="screen" 
href="thirdparty/jQueryPlugins/jQuerytextLimiterPlugin/jquery.inputlimiter.1.0.css" /> 
<link rel="stylesheet" type="text/css" media="screen" 
href="thirdparty/jqgrid/css/themes/redmond/jquery-ui-1.7.1.custom.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="css/gugrid.css" /> 
<link rel="stylesheet" type="text/css" media="screen" 
href="thirdparty/jqgrid/css/ui.jqgrid.css" /> 
<link rel="stylesheet" type="text/css" media="screen" 
href="thirdparty/jQueryPlugins/jQueryValidationplugin/validationEngine.jquery.css" /> 
<script> 
     function fillGridOnEvent(){ 
      $("#jQGrid").html("<table id=\"list\"></table><div id=\"page\"></div>"); 
      jQuery("#list").jqGrid({ 
       url:'<%=request.getContextPath()%>/JQGridServlet?q=1&action=fetchData', 
       datatype: "xml", 
       height: 250, 
       colNames:['Sr. No.','Student Name','Student Std.','Student RollNo.',"Action"], 
       colModel:[ 
        {name:'srNo',index:'srNo', width:90,sortable:true}, 
        {name:'stdName',index:'stdName', width:130,sortable:false}, 
        {name:'stdStd',index:'stdStd', width:100,sortable:false}, 
        {name:'stdRollNo',index:'stdRollNo', width:180,sortable:false}, 
        {name:'view',index:'view', width:100,sortable:false} 
       ], 
       multiselect: false, 
       paging: true, 
       rowNum:20, 
       rowList:[10,20,30], 
       pager: "#page", 
       loadonce:false, 
       recordtext:"View {0} - {1} of {10}", 
       caption: "Student Details" 
      }).navGrid('#page',{edit:false,add:false,del:false}); 
     } 
     jQuery().ready(function(){ 
      //fillGrid(); 
      alert("ready"); 
     }); 
    </script> 
</head> 
<body onload="fillGridOnEvent();"> 
    <div id="jQGrid" align="center"> 
    </div> 
</body> 
</html>

这是我的servlet文件 -

import java.io.IOException; 
import java.io.PrintWriter; 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 


public class JQGridServlet extends HttpServlet { 


protected void processRequest(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException {   
    PrintWriter out = response.getWriter(); 
    try { 

     if (request.getParameter("action").equals("fetchData")) { 
      response.setContentType("text/xml;charset=UTF-8");     

      String status = request.getParameter("status"); 

      String rows = request.getParameter("rows"); 
      String page = request.getParameter("page"); 


      int totalPages = 0; 
      int totalCount = 150; 

      if (totalCount > 0) { 
       if (totalCount % Integer.parseInt(rows) == 0) { 
        totalPages = totalCount/Integer.parseInt(rows); 
       } else { 
        totalPages = (totalCount/Integer.parseInt(rows)) + 1; 
       } 

      } else { 
       totalPages = 0; 
      } 
      System.out.println(totalPages); 
      out.print("<?xml version='1.0' encoding='utf-8'?>\n"); 
      out.print("<rows>"); 
      out.print("<page>" + request.getParameter("page") + "</page>"); 

      out.print("<total>" + totalPages + "</total>"); 
      out.print("<records>" + 150 + "</records>"); 
      int srNo = 1; 

      for (int i=0;i<150;i++) { 
       out.print("<row id='" + i + "'>"); 
       out.print("<cell>" + srNo + "</cell>"); 
       out.print("<cell>Taher</cell>"); 
       out.print("<cell>8th</cell>"); 
       out.print("<cell>25</cell>"); 
       out.print("<cell><![CDATA[<a href='ViewStd.jsp'>View</a>]]></cell>"); 
       out.print("</row>"); 
       srNo++;     
      } 
      out.print("</rows>"); 
     } 

    } finally { 
     out.close(); 
    } 
} 


@Override 
protected void doGet(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
    processRequest(request, response); 
} 


@Override 
protected void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
    processRequest(request, response); 
} 


@Override 
public String getServletInfo() { 
    return "Short description"; 
}

}

您是否更改要呈现给jqGrid的数据集的哪个页面？ – Mark 2013-02-27 13:56:39

答

当您创建在Servlet中的响应，你应该包括只有在页面上应该显示的行，而不是全部行。

因此，而不是返回所有行：

for (int i = 0; i < totalRecords; i++) { 
    printRecord(i); 
}

，你应该只返回需要行：

int firstRecord = (pageNumber - 1) * rowsPerPage; 
int lastRecord = Math.min(firstRecord + rowsPerPage, totalRecords); 
for (int i = firstRecord; i < lastRecord; i++) { 
    printRecord(i); 
}

注：有 “PAGENUMBER-1”，因为页码开始从1开始，而不是从0开始。“Math.min”在那里，因为上一页页的行可能少于所需的行;例如，如果每页需要10行，并且共有32条记录，则前三个页面将包含10行，但第四个页面只包含2行。

顺便说一句，您链接的页面上还有一个错误。确定 “总页数” 正确的公式应该不是：

totalPages = (totalRecords/rowsPerPage) + 1;

而是：

totalPages = (totalRecords + rowsPerPage - 1)/rowsPerPage;

为什么？如果共有30条记录，并且每页需要10行，则只有3页，而不是文章中的4条。只有31个和更多的记录，你需要4页。

Thankx很多@Viliam Bur！它运行良好。正如你所说的，只需要包含当前页面上需要的行。 – Abhijit 2013-02-27 19:13:24

@Ahhijit - 我很乐意提供帮助。因此，如果您的问题得到解答，您可以点击答案顶部的“将此答案设置为您接受的答案”。谢谢！ ;-) – 2013-03-15 14:19:09

如何在jqgrid中显示多个页面？

相关推荐