How to search a date range with dandelion datatables

Question

I am developing a web app using dandelion datatables with server side processing, pagination and filtering. The version I am using is 1.1.0 (JSP)

I want to use an external form to update the dataset of my datatable. The table has two fields: Start Date, Stop Date as below:

<datatables:table id="myTableId" url="/results"  serverSide="true" serverparams="getFilterParams" processing="true" theme="bootstrap3" cssClass="table table-striped">
    <datatables:column title="Start Date" property="startDate" filterable="false" />
    <datatables:column title="Stop Date" property="stopDate" filterable="false" />
</datatables:table>

In the external form I am using bootstrap datetimepicker

<sf:form id="searchForm">
    <div class="form-group">
        <div>Start Date</div>
        <div class='input-group date' id='startDate'>
            <input name='startDate' 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='stopDate'>
            <input name='stopDate' type='text' class="form-control" /> <span
                class="input-group-addon"> <span
                class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
    <div>
        <button id="searchBtn" class="btn btn-primary btn-search searchButton"
            type="button" onclick="oTable_myTableId.ajax.reload();">Search</button>
    </div>
</sf:form>

Javascript

function getFilterParams(aoData) {
    aoData.push({"name" : "startDate", "value" : $('#startDate').val()});
    aoData.push({"name" : "stopDate", "value" : $('#stopDate').val()});
}

Controller

@RequestMapping(value = "/results")
    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);
    }

Could you please give me some direction on what to do to filter results searching all rows within the range selected in the datetimepicker external form

Thanks

score 0 · Answer 1 · answered Jan 18 '16 at 08:57

Recently I did the same kind of task and solved that particular issue with the following technique:

I created a Model class with dateFrom and dateTo fields.
When user selects dates in datepickers and presses "confirm" button server receives post request with @ModelAttribute containing dateFrom and dateTo.
Then I retrieve data from database with that dates (e.g. select * from table where (date between :datefrom AND :dateto)) and send it back to my view.

How to search a date range with dandelion datatables

1 Answers1