数据表日期范围过滤器不起作用

Posted 2023-05-08

【中文标题】数据表日期范围过滤器不起作用

【英文标题】：Datatables Date Range Filters not working

【发布时间】：2017-02-24 05:47:16

【问题描述】：

我正在尝试使用日期范围过滤器添加服务器端数据表实现。过滤器不过滤任何数据。我不知道它在哪里破裂。需要你的帮助来找出我哪里出错了。

这里是脚本。

$(文档).ready(函数() '使用严格'; var dataTable = $('#employee-grid').DataTable( “处理”：是的， “服务器端”：是的， "sScrollY": "300px", “iDisplayLength”：25， “bJQueryUI”：是的， “bStateSave”：真， “阿贾克斯”： url: "employee-grid-data.php", // json 数据源 type: "post", // 方法，默认获取 error: function() // 错误处理 $(".employee-grid-error").html(""); $("#employee-grid").append('在服务器中没有找到数据'); $("#employee-grid_processing").css("display", "none"); , “表格工具”： "sSwfPath": "swf/copy_csv_xls_pdf.swf", “按钮”：[ "sExtends": "收藏", "sButtonText": "导出", "aButtons": ["csv", "xls", "pdf", "print"] ] ); 功能 myCustomFilterFunction(filterVal, columnVal) 找到变量； if (columnVal === '') 返回真； 如果（找到！== -1） 返回真； 返回假； var oTable = $('#employee-grid').dataTable().yadcf([ 列号：0， filter_container_id: 'external_filter_container_0', filter_type: "auto_complete", text_data_delimiter：“，” , 列号：1， filter_container_id: 'external_filter_container_1', filter_type: "auto_complete", text_data_delimiter：“，” , 列号：2， filter_container_id: 'external_filter_container_2', filter_type: "auto_complete", text_data_delimiter：“，” , 列号：3， filter_container_id: 'external_filter_container_3', filter_type: 'range_date', date_format: 'mm/dd/yyyy' , 列号：4， filter_container_id: 'external_filter_container_4', 数据： [ 值：'1'， 标签：'Yessss :)' , 值：'0'， 标签：'Noooo :(' ], filter_default_label: "选择是/否" ]， externally_triggered：真 ); );

这是 Html

<div class="container">

          <div id="externaly_triggered_wrapper" class="">
            <div>
                <span>First name:</span>
                <span id="external_filter_container_0"></span>
            </div>
            <div>
                <span>Last name:</span>
                <span id="external_filter_container_1"></span>
            </div>
            <div>
                <span>Email:</span>
                <span id="external_filter_container_2"></span>
            </div>
            <div>
                <span>Date Filter:</span>
                <span id="external_filter_container_3"></span>
            </div>
            <div>
                <span>Newsletter:</span>
                <span id="external_filter_container_4"></span>
            </div>
          </div>
          <div id="externaly_triggered_wrapper-controls">
            <div>
                <input type="button" onclick="yadcf.exFilterExternallyTriggered(oTable);" value="Filter" class="some_btn general_btn">
                <input type="button" onclick="yadcf.exResetAllFilters(oTable);" value="Reset" class="some_btn general_btn">
            </div>
          </div>    
        <div class="container" style="width:760px !important;">
            <table id="employee-grid"  cellpadding="0" cellspacing="0" border="0" class="display" >
                    <thead>
                        <tr>
                            <th>First Name</th>
                            <th>Last name</th>
                            <th>Email</th>
                            <th>Date added</th>
                            <th class="ui-state-default" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Yes / No: activate to sort column ascending" style="width: 235px;">
                                <div class="DataTables_sort_wrapper" style="display: inline-block;">Yes / No<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span></div>
                                <div id="yadcf-filter-wrapper--example1-2" class="yadcf-filter-wrapper">
                                    <select id="yadcf-filter--example1-2" class="yadcf-filter " onchange="yadcf.doFilter(this, '-example1', 2, 'contains');" onkeydown="yadcf.preventDefaultForEnter(event);" onmousedown="yadcf.stopPropagation(event);" onclick="yadcf.stopPropagation(event);">
                                        <option value="-1">Select Yes/No</option>
                                        <option value="Yes">Yessss :)</option>
                                        <option value="No">Noooo :(</option>
                                    </select>
                                    <button type="button" id="yadcf-filter--example1-2-reset" onmousedown="yadcf.stopPropagation(event);" onclick="yadcf.stopPropagation(event);yadcf.doFilter('clear', '-example1', 2); return false;" class="yadcf-filter-reset-button ">x</button>
                                </div>
                            </th>
                        </tr>
                    </thead>

            </table>
        </div>

【问题讨论】：

如何将日期范围参数传递给服务器端代码？

它是由javascript生成的。我正在使用此示例yadcf-showcase.appspot.com/dom_source_externally_triggered.html，这已在他们的 javascript 页面中。这是 js 文件，其中包含从和到日期的案例，传递到服务器端 github.com/vedmack/yadcf/blob/master/jquery.dataTables.yadcf.js

【参考方案1】：

在服务器端，您为 range_date 获得的搜索文本中有一个分隔符，例如：

01/05/2017-yadcf_delim-20/05/2017

所以你必须使用类似的东西来分割它：

searchText.Split(new string[]  "-yadcf_delim-" , StringSplitOptions.None)