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

时间:2016-10-14 17:48:17

标签: javascript jquery html datatables

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

这是脚本。


    $(document).ready(function() {
                    'use strict';
                    var dataTable = $('#employee-grid').DataTable({
                        "processing": true,
                        "serverSide": true,
                        "sScrollY": "300px",
                        "iDisplayLength": 25,
                        "bJQueryUI": true,
                        "bStateSave": true,
                        "ajax": {
                            url: "employee-grid-data.php", // json datasource
                            type: "post", // method  , by default get
                            error: function() { // error handling
                                $(".employee-grid-error").html("");
                                $("#employee-grid").append('No data found in the server');
                                $("#employee-grid_processing").css("display", "none");

                            }
                        },
                        "tableTools": {
                            "sSwfPath": "swf/copy_csv_xls_pdf.swf",
                            "aButtons": [

                                {
                                    "sExtends": "collection",
                                    "sButtonText": "Export",
                                    "aButtons": ["csv", "xls", "pdf", "print"]
                                }
                            ]
                        }
                    });
                    function myCustomFilterFunction(filterVal, columnVal) {
                        var found;
                        if (columnVal === '') {
                            return true;
                        }


                        if (found !== -1) {
                            return true;
                        }
                        return false;
                    }
                    var oTable = $('#employee-grid').dataTable().yadcf([{
                        column_number: 0,
                        filter_container_id: 'external_filter_container_0',
                        filter_type: "auto_complete",
                        text_data_delimiter: ","
                    }, {
                        column_number: 1,
                        filter_container_id: 'external_filter_container_1',
                        filter_type: "auto_complete",
                        text_data_delimiter: ","
                    }, {
                        column_number: 2,
                        filter_container_id: 'external_filter_container_2',
                        filter_type: "auto_complete",
                        text_data_delimiter: ","
                    }, {
                        column_number: 3,
                        filter_container_id: 'external_filter_container_3',
                        filter_type: 'range_date',
                        date_format: 'mm/dd/yyyy'
                    }, {
                        column_number: 4,
                        filter_container_id: 'external_filter_container_4',
                        data: [{
                            value: '1',
                            label: 'Yessss :)'
                        }, {
                            value: '0',
                            label: 'Noooo :('
                        }],
                        filter_default_label: "Select Yes/No"
                    }], {
                        externally_triggered: true
                    });






                });

这是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" width="100%">
                    <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>

1 个答案:

答案 0 :(得分:0)

在服务器端,您为range_date获取的搜索文本中包含分隔符,例如:

  

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

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

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