-1
나는 datatable을 사용하여 serverSideSearch 액션을 사용하여 데이터 목록을 표시하는 jsp 뷰 페이지를 가지고있다. jsp 페이지에는 날짜 선택을위한 양식이 있고 다른 필드에는 Generate 버튼이 있습니다. 이제 문제는 내가 Generate 버튼을 클릭 할 때마다 페이지를 새로 고친 다음 데이터 테이블을 표시한다는 것입니다. 난 그 페이지를 새로 고치고 싶지 않아서, 데이터 테이블은 새로 고친 데이터 테이블을 가져와야한다. 여기에 내 JSP 파일입니다 :submit시 jsp에서 페이지 자동 새로 고침 방지.
<%@ page contentType="text/html; charset=ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="display" uri="http://displaytag.sf.net" %>
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
if('${pageVisitLogList}' == 'undefined' || '${pageVisitLogList}' == '[]' || '${pageVisitLogList}' == ''){
$('.container').css('text-align', 'center');
}
var dataTable; //reference to your dataTable
$('#submitPageLog').click(function() {
dataTable.fnReloadAjax('pageVisitReport.jsp');
});
dataTable= $('#row').dataTable(
{
"sDom" : "<'row'<'spanPag'l><'span6'p><'spanSer'f>r>t<'row'<'spanPage'i><'span6'p>>",
"oLanguage" : {"sLengthMenu" : "_MENU_ records per page"},
"bServerSide": true,
"sAjaxSource": "serverSideSearch.action?dateFrom="+$('#fromDate').val()+"&dateTo="+$('#toDate').val(),
"bProcessing": true,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "mDataProp": "deviceMacAddress" },
{ "mDataProp": "deviceName"},
{ "mDataProp": "facility"},
{ "mDataProp": "visitTime"},
{ "mDataProp": "module"},
{ "mDataProp": "pageVisited"},
]
});
$("#fromDate").datepicker({
showOn: 'both',
buttonImage: "Reports/resources/images/calendar.gif",
buttonImageOnly: false,
changeMonth: false,
changeYear: false,
showAnim: 'slideDown',
duration: 'fast'
});
$("#toDate").datepicker({
showOn: 'both',
buttonImage: "Reports/resources/images/calendar.gif",
buttonImageOnly: false,
changeMonth: false,
changeYear: false,
showAnim: 'slideDown',
duration: 'fast'
});
$('.ui-datepicker-trigger').css('margin-bottom', '11px');
});
</script>
<style type="text/css">
a {
color: #047CB9;
text-decoration: none;
}
</style>
</head>
<body>
<br><br>
<s:form id="pageVisitLogForm" theme="simple" method="post" >
<div class="innerTableClass">
<table align="center" class="table" style="line-height: 2;">
<tr>
<td colspan="4" class="searchHeader">Page Visit Report</td>
</tr>
<tr>
<td align="left" colspan="4" class="required"><s:actionerror cssClass="required"/></td>
</tr>
<tr>
<td align="left" style="padding-top: 13px;">Date From</td>
<td><s:textfield id="fromDate" name="dateFrom" cssStyle="width: 170px; margin-right: 2px;" readonly="true"></s:textfield></td>
<td align="left" style="padding-left:70px; padding-top: 13px;">Date To</td>
<td><s:textfield id="toDate" name="dateTo" style="width: 170px; margin-right: 2px;" readonly="true"></s:textfield></td>
</tr>
<tr>
<td align="left" style="padding-top: 13px;">Module</td>
<td><s:select id="modulePageLog" list="moduleMap" name="module"/></td>
<td align="left" style="padding-left:70px; padding-top: 13px;"> MAC Address</td>
<td> <s:textfield name="deviceMacAddress"></s:textfield> </td>
</tr>
<tr>
<td align="left" style="padding-top: 13px;">Facility</td>
<td ><s:select list="facilityMap" name="facility" /></td>
<td align="left" style="padding-left:70px; padding-top: 13px;"> App Mode</td>
<td ><s:select list="appModeMap" name="appMode" /></td>
</tr>
<tr>
<td align="left" style="padding-top: 13px;">Locale</td>
<td ><s:select list="localeMap" name="currentLocale" /></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="4" align="center">
<s:submit id="submitPageLog" key="label.fetchReport" action="serverSideSearch.action" />
</td>
</tr>
</table>
</div>
</s:form>
<br/><br/>
<div class="container">
<table id="row" >
<thead>
<tr>
<th>MAC Address</th>
<th>Device Name</th>
<th>Facility</th>
<th>Visit Time</th>
<th>Module</th>
<th>Page Visited</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>
fnReloadAjax()을 검색했지만 사용하지 못했습니다. 페이지가 새로 고침되고 있습니다 ...
thnx 도움이 될 수 있습니다, 그것은 기본적인 Ajax 호출을 이해하는 저를 도왔다. –