I have a jsp page with serverside processing having a form having some options(selection criteria for data to be displayed)and a button used to display a list data using datatable. For the first time, is display the list data on the page, but when i click for 2nd time changing date, then it gets stuck and the console says the all my params for datatable are null. the params are :
import javax.servlet.http.HttpServletRequest;
import com.healthslate.common.util.ObjectUtils;
public class DataTablesParamUtility {
public static JQueryDataTableParamModel getParam(HttpServletRequest request)
{
if(!ObjectUtils.isEmpty(request.getParameter("sEcho")))
{
JQueryDataTableParamModel param = new JQueryDataTableParamModel();
param.sEcho = request.getParameter("sEcho");
param.sSearch = request.getParameter("sSearch");
param.sSearch ="00:13:ef:60:0f:60";
param.sColumns = request.getParameter("sColumns");
param.iDisplayStart = Integer.parseInt(request.getParameter("iDisplayStart"));
param.iDisplayLength= Integer.parseInt(request.getParameter("iDisplayLength") );
param.iColumns = Integer.parseInt( request.getParameter("iColumns") );
param.iSortingCols = Integer.parseInt( request.getParameter("iSortingCols") );
param.iSortColumnIndex = Integer.parseInt(request.getParameter("iSortCol_0"));
param.sSortDirection = request.getParameter("sSortDir_0");
return param;
}else
return null;
}
}
and my jsp page is :
<%@ 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 oTable= $('#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"},
]
});
$('#submitPageLog').click(function() {
alert('here we go');
oTable.fnReloadAjax("serverSideSearch.action?dateFrom="+$('#fromDate').val()+"&dateTo="+$('#toDate').val());
});
$("#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" action="serverSideSearch.action" >
<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 key="label.fetchReport" />
<input type="button" id="submitPageLog" value="Generate Report" >
</td>
</tr>
</table>
</div>
</s:form>
<br/><br/>
<div class="container" id="click_me">
<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>
Submit an article or tip