Question

我正在开发一个使用蒲公英数据表的Web应用程序，其中包括服务器端处理，分页和过滤。我使用的版本是1.1.0（JSP）

我想使用外部表单来更新数据表的数据集。该表格有两个字段：开始日期，停止日期，如下所示：

<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>

在外部表单中我使用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()});
}

控制器

@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);
    }

您能否就如何过滤搜索datetimepicker外部表单中所选范围内所有行的搜索结果给出一些指示

由于

Answer 1

最近我做了同样的任务，用以下技术解决了这个问题：

我创建了一个带有dateFrom和dateTo字段的Model类。
当用户在datepickers中选择日期并按“确认”按钮时，服务器接收包含dateFrom和dateTo的@ModelAttribute的发布请求。
然后我从具有该日期的数据库中检索数据（例如 select * from table where (date between :datefrom AND :dateto)）并将其发回我的观点。

如何使用蒲公英数据表搜索日期范围

1 个答案: