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

时间:2013-02-27 13:38:23

标签: jqgrid

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

中的代码

这是我的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";
}

}

1 个答案:

答案 0 :(得分:0)

在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”就在那里,因为 last 页面的行数可能少于所需数量;例如,如果你想要每页10行,并且总共有32行记录,前三页将包含10行,但第四页只有2行。

顺便说一下,您链接的页面上还有另一个错误。确定“totalPages”的正确公式应该

totalPages = (totalRecords / rowsPerPage) + 1;

但是:

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

为什么呢?如果总共有30条记录,并且每页需要10行,那么它只有3页,而不是文章中的4页。只有31个或更多记录,您需要4页。