如何在jqgrid中显示多个页面？
我正在从cassandra数据库读取数据并显示在jqGrid中。但它在所有页面上都显示相同的记录。我使用的代码来自 这是我的JSP文件-如何在jqgrid中显示多个页面？,jqgrid,Jqgrid,我正在从cassandra数据库读取数据并显示在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
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>
在此处输入代码
JQGrid专用
函数fillGridOnEvent（）{
$（“#jQGrid”）.html（“”）；
jQuery（“#list”）.jqGrid({
url:“/JQGridServlet？q=1&action=fetchData”，
数据类型：“xml”，
身高：250，
colNames:['Sr.No.，'Student Name'，'Student Std.，'Student RollNo.，'Action']，
colModel：[
{name:'srNo'，index:'srNo'，width:90，sortable:true}，
{名称：'stdName'，索引：'stdName'，宽度：130，可排序：false}，
{名称：'stdStd'，索引：'stdStd'，宽度：100，可排序：false}，
{名称：'stdRollNo'，索引：'stdRollNo'，宽度：180，可排序：false}，
{名称：'view'，索引：'view'，宽度：100，可排序：false}
],
多选：错，
是的，
rowNum:20，
行列表：[10,20,30]，
寻呼机：“#第页”，
loadonce:false，
recordtext:“查看{10}中的{0}-{1}”，
描述：“学生详细信息”
}).navGrid（“#page”，{edit:false，add:false，del:false}）；
}
jQuery（）.ready（函数（）{
//fillGrid（）；
警惕（“准备就绪”）；
});
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";
}
import java.io.IOException；
导入java.io.PrintWriter；
导入javax.servlet.ServletException；
导入javax.servlet.http.HttpServlet；
导入javax.servlet.http.HttpServletRequest；
导入javax.servlet.http.HttpServletResponse；
公共类JQGridServlet扩展了HttpServlet{
受保护的void processRequest（HttpServletRequest请求、HttpServletResponse响应）
抛出ServletException，IOException{
PrintWriter out=response.getWriter（）；
试一试{
if（request.getParameter（“action”）.equals（“fetchData”））{
setContentType（“text/xml；charset=UTF-8”）；
字符串状态=request.getParameter（“状态”）；
String rows=request.getParameter（“rows”）；
String page=request.getParameter（“页面”）；
int totalPages=0；
整数总数=150；
如果（总计数>0）{
if（totalCount%Integer.parseInt（行）==0）{
totalPages=totalCount/Integer.parseInt（行）；
}否则{
totalPages=（totalCount/Integer.parseInt（行））+1；
}
}否则{
总页数=0；
}
系统输出打印项次（总页数）；
打印输出（“\n”）；
输出。打印（“”）；
out.print（“+request.getParameter（“page”）+”）；
打印（“+totalPages+”）；
打印（“+150+”）；
int srNo=1；
对于（int i=0；i
}在Servlet中创建响应时，应该只包括页面上应该显示的行，而不是所有行
因此，不要返回所有行：
for (int i = 0; i < totalRecords; i++) {
printRecord(i);
}
但是：
totalPages = (totalRecords + rowsPerPage - 1) / rowsPerPage;
为什么？如果总共有30条记录，而您希望每页10行，那么它只有3页，而不是本文中的4页。只有31条或更多记录，您才需要4页。您是否更改向jqGrid显示的数据集的哪一页？非常感谢@Viliam Bur！它工作得很好。正如您所说，只有当前页上需要的行需要更改包括。@Abhijit-我很乐意提供帮助。因此，如果您的问题得到回答，请单击答案顶部的“将此答案设置为您接受的答案”好吗？谢谢！；-）
totalPages = (totalRecords / rowsPerPage) + 1;
totalPages = (totalRecords + rowsPerPage - 1) / rowsPerPage;