External Form Search Date Range trigger dandelion datatable update

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

External Form Search Date Range trigger dandelion datatable update

Quentin_Tanioartino
Hi,

I am using dandelion datatables to show my research results in a web page. I have managed to make it working with server-side processing as well.

I am now trying  to add an external form to update the research results of the table. The table has two columns Stard Date and Stop Date on which I would like to add external filters (bootstrap-datetimepickers). From an external form I would like to insert start date and stop date and after clicking the apply filters button I want the table to refresh with the new result set. I am using ajax for this.

Please see below my attempt.

I am using the latest version of dandelion datatable

Spring Mvc Controller

@RequestMapping(value = "/results", method = RequestMethod.GET)
	public @ResponseBody DatatablesResponse<Results> findAllForDataTables(HttpServletRequest request) {

		DatatablesCriterias dataTableCriterias = DatatablesCriterias.getFromRequest(request);
		for (ColumnDef columnDef : dataTableCriterias.getColumnDefs()) {
			switch (columnDef.getName()) {
				case "startDate":
					columnDef.setSearch(request.getParameter("startDate"));
					break;
				case "stopDate":
					columnDef.setSearch(request.getParameter("stopDate"));
					break;
			}
		}
		DataSet<Results> results = this.resultsServiceimpl.findResultsWithDatatablesCriterias(dataTableCriterias);
		return DatatablesResponse.build(results, dataTableCriterias);
	}


Customised Ajax Call

function getFilterParams() {
	return {
		"type" : "GET",
		"url" : "results",
		"data" : {
			"startDate" : $('#startDatePicker').find("input").val(),
			"stopDate" : $('#stopDatePicker').find("input").val()
		}
	};
}

Web Page with dandelion datatable

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="datatables"
	uri="http://github.com/dandelion/datatables"%>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form"%>

<div class="container-fluid">
		<div class="row">
			<div class="span12">
				<div class="accordion" id="filterAccordion">
					<div class="accordion-group">
						<div class="accordion-heading">
							<a class="btn btn-default accordion-toggle" data-toggle="collapse" data-parent="#filterAccordion" href="#collapseOne"> <span class="pull-right"><i class="icon-white icon-chevron-down"></i></span> Filter Records
							</a>
						</div>
						<div id="collapseOne" class="accordion-body collapse">
							<div class="accordion-inner container">
								<div class="row">
									<div class="form-group">
										<div>Start Date</div>
										<div class='input-group date' id='startDatePicker'>
											<input name='startDatePicker' type='text' class="form-control" />
											<span class="input-group-addon"> <span
												class="glyphicon glyphicon-calendar"></span>
											</span>
										</div>
									</div>
									<div class="form-group">
										<div>Stop Date</div>
										<div class='input-group date' id='stopDatePicker'>
											<input name='stopDatePicker' type='text' class="form-control" /> <span
												class="input-group-addon"> <span
												class="glyphicon glyphicon-calendar"></span>
											</span>
										</div>
									</div>
								</div>
								<div class="row">
									<div class="span2">
										<button id="searchBtn"
											class="btn btn-primary btn-search searchButton" type="button"
											onclick="oTable_myTableId.ajax.reload();">Apply Filters
											Calls</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
</div>		
<div class="container-fluid">
	<div class="row">
		
		<div class="col-md-12">
			<datatables:table id="myTableId" url="/results" serverSide="true" processing="true" ajaxParams="ajax#getFilterParams">
				<datatables:column title="ID" property="id" sortable="false" filterable="true"/>
				<datatables:column title="Start Date" property="startDate"/> 
				<datatables:column title="Stop Date" property="stopDate"/>
			</datatables:table>
		</div>
	</div>
</div>


This does not work yet can you please help me to troubleshoot the problem

Thanks
Reply | Threaded
Open this post in threaded view
|

Re: External Form Search Date Range trigger dandelion datatable update

Quentin_Tanioartino
Solved

Here my solution

Spring Mvc Controller


@RequestMapping(value = "/results", method = RequestMethod.GET)
	public @ResponseBody DatatablesResponse<Results> findAllForDataTables(HttpServletRequest request) {

		DatatablesCriterias dataTableCriterias = DatatablesCriterias.getFromRequest(request);
		for (ColumnDef columnDef : dataTableCriterias.getColumnDefs()) {
			switch (columnDef.getName()) {
				case "startDate":
					columnDef.setSearchFrom(request.getParameter("startDate"));
					break;
				case "stopDate":
					columnDef.setSearchTo(request.getParameter("stopDate"));
					break;
			}
		}
		DataSet<Results> results = this.resultsServiceimpl.findResultsWithDatatablesCriterias(dataTableCriterias);
		return DatatablesResponse.build(results, dataTableCriterias);
	}

Customised Ajax Call


function getFilterParams() {
	var startDateValue = $('#startDatePicker').find('input').val();
	var stopDateValue = $('#stopDatePicker').find('input').val();
		return {
			"type" : "GET",
			"url"  : "/results",
			"data" : function ( d ) {
		        d.startDate = $('#startDatePicker').find('input').val();
		        d.stopDate = $('#stopDatePicker').find('input').val();
			}
		};
}

Reply | Threaded
Open this post in threaded view
|

Re: External Form Search Date Range trigger dandelion datatable update

Thibault Duchateau
Administrator
You're awesome.

Sorry about the absence but I'll be able to work on the project back soon!

Regards,
Thibault.