我正在编写一个程序，在该程序中，一旦有日期更改，就会创建一个表。但是这里的问题是，首先在选择日期时创建了表格，但是当我开始更改日期时，表格没有被创建，并且控制台中没有错误。以下是我的代码。
table.jsp
<html>
<head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="jbPivot.min.js"></script>
<link rel="stylesheet" href="jbPivot.css">
</head>
<body>
<marquee>
<h1>This is an example of ajax</h1>
</marquee>
<p>
Date: <input type="text" id="startDatePicker">
</p>
<p>
Date: <input type="text" id="endDatePicker">
</p>
<span id="somediv"> <span id="err">Select Correct Dates</span>
</span>
<script type="text/javascript" src="tableGenerator.js"></script>
</body>
</html>
tableGenerator.js
var startDate = $("#startDatePicker").datepicker({
dateFormat : 'yy-mm-dd',
onClose : function(selectedDate) {
$("#endDatePicker").datepicker("option", "minDate", selectedDate);
}
});
var endDate = $("#endDatePicker").datepicker({
dateFormat : 'yy-mm-dd',
onClose : function(selectedDate) {
$("#startDatePicker").datepicker("option", "maxDate", selectedDate);
}
});
$(document).on('change', '#startDatePicker,#endDatePicker', function() {
$('#somediv > table').remove();
$.getJSON('Controller', {
'startDate' : startDate.val(),
'endDate' : endDate.val()
}, function(searchList) {
console.log(JSON.stringify(searchList));
if (searchList.length < 1) {
$('#err').show();
$('#err').text("No Records found in Specified Dates");
} else {
$("#somediv").jbPivot({
fields : {
caseOwner : {
field : 'caseOwner',
sort : "asc",
showAll : true,
agregateType : "distinct"
},
finalStatus : {
field : 'finalStatus',
sort : "asc",
showAll : false,
agregateType : "distinct"
},
status : {
field : 'status',
sort : "asc",
showAll : false,
agregateType : "distinct"
},
Count : {
agregateType : "count",
groupType : "none"
},
},
xfields : [ "caseOwner" ],
yfields : [ "finalStatus" ],
statfields : [ "status" ],
zfields : [ "Count" ],
data : searchList
});
}
});
});
控制者
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.bean.UserBean;
import com.dao.DataDao;
import com.google.gson.Gson;
@WebServlet("/Controller")
public class Controller extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try {
/* Date Start */
String startDateStr = request.getParameter("startDate");
String endDateStr = request.getParameter("endDate");
System.out.println("Start date got is " + startDateStr + " and end date is " + endDateStr);
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
SimpleDateFormat print = new SimpleDateFormat("yyyy-MM-dd");
Date startParsedDate = null, endParsedDate = null;
String startDate = null, endDate = null;
if (startDateStr != null && !startDateStr.equals("")) {
startParsedDate = sdf.parse(startDateStr);
startDate = print.format(startParsedDate);
}
if (endDateStr != null && !endDateStr.equals("")) {
endParsedDate = sdf.parse(endDateStr);
endDate = print.format(endParsedDate);
}
System.out.println(startDate + " value and " + endDate);
/* Date End */
DataDao dataDao = new DataDao();
ArrayList<UserBean> list = dataDao.getFrameWork(startDate, endDate);
String searchList = new Gson().toJson(list);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(searchList);
System.out.println("servlet Done");
} catch (Exception e) {
System.err.println(e.getMessage() + " servlet Errotr");
}
}
}
DataDAO.java
package com.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import org.bean.UserBean;
public class DataDao {
private Connection connection;
public DataDao() throws Exception {
connection = DBUtility.getConnection();
}
public ArrayList<UserBean> getFrameWork(String startDate, String endDate) throws SQLException {
String startDateFromController = startDate;
String endDateFromController = endDate;
System.out.println("DAO VAlues are " + startDateFromController + " and " + endDateFromController);
ArrayList<UserBean> list = new ArrayList<UserBean>();
PreparedStatement ps = null;
try {
String query;
if (!(startDateFromController == null) && endDateFromController == null) {
System.out.println("first block imvoked");
query = "select * from StatusTable where convert(date, [Start Time]) >= ?";
ps = connection.prepareStatement(query);
ps.setString(1, startDateFromController);
} else if (startDateFromController == null && !(endDateFromController == null)) {
System.out.println("end date is " + endDateFromController);
System.out.println("second");
query = "select * from StatusTable where convert(date, [Start Time]) <= ?";
ps = connection.prepareStatement(query);
ps.setString(1, endDateFromController);
} else if (startDateFromController == null && endDateFromController == null) {
System.out.println("Thuird block");
query = "select * from StatusTable where [Start Time] Is NOT NULL";
ps = connection.prepareStatement(query);
} else {
System.out.println("Forth block");
query = "select * from StatusTable where convert(date, [Start Time]) between ? and ?";
ps = connection.prepareStatement(query);
ps.setString(1, startDate);
ps.setString(2, endDate);
}
ResultSet rs = ps.executeQuery();
if (!rs.next()) {
System.out.println("No records found");
} else {
do {
UserBean userBean = new UserBean();
userBean.setCaseNumber(rs.getString("Case Number"));
userBean.setCaseOwner(rs.getString("Case Owner"));
userBean.setStatus(rs.getString("Status"));
userBean.setIssue(rs.getString("Issue"));
userBean.setReason(rs.getString("Reason"));
userBean.setDateOpened(rs.getString("Date/Time Opened"));
userBean.setAge(rs.getInt("Age"));
userBean.setFinalStatus(rs.getString("Final Status"));
list.add(userBean);
} while (rs.next());
}
} catch (Exception e) {
System.out.println(e + " DAO Error");
}
return list;
}
}
请让我知道我该怎么做。我应该在不刷新页面的情况下获取数据。即，我更改日期后，更改应立即反映出来。
谢谢
最佳答案
我在您的代码中看到的问题是，您始终试图在somediv元素上初始化数据透视表小部件。我认为，如果您尝试使用不同的数据一次又一次地初始化同一元素上的窗口小部件，则数据透视表窗口小部件将不会更新表。根据文档here，如果要替换表数据，则应获取对数据透视表数据对象的引用，并使用新列表调用insertRecords()。
var $data = $("#pivot1").data('jbPivot');
$data.reset();
$data.insertRecords([--your-new--array--]);
这是实际的示例pen。
关于javascript - jQuery datepicker仅在刷新页面后有效，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35847420/