Question

确定，

我有一个datepicker范围和两个单选按钮，我需要过滤我的数据表。基本上，我所追求的是如下：

用户从范围选择器中选择日期然后，用户选择“值日期”或“消息日期”单选按钮用户单击“过滤器”按钮和基于其选择的可数据文件管理器。

我的数据表包含两个日期列，由单选按钮表示。例如，用户输入可以是。

从2012年4月3日至2011年4月3日，在“价值日期”栏中。

任何指针？

现有代码：

         <article class="module width_full">
        <header><h3>Message Detail</h3></header>
        <div id="radio">



            <label for="from">From</label>
            <input type="text" id="from" name="from" />
            <label for="to">to</label>
            <input type="text" id="to" name="to" />

                   <label for="mdValueDate">Value Date</label>
                   <input type="radio" id="mdValueDate" name="radio" />
                   <label for="mdMessageDate">Message Date</label>
                   <input type="radio" id="mdMessageDate" name="radio" />



                    <button id="btnFilterMd">Filter</button>
                    <button id="btnClearFilter">Clear Filter</button>
                   </div>

              <table      id="tblMessageDetail"            class="display">
               <thead>
                    <tr>
                        <th>Date 1</th>
                        <th>Date 2</th>

                    </tr>
              </thead>
              <tbody>
                    <tr>
                        <td colspan="5">Loading....</td>
                    </tr>
              </tbody>
              <tfoot></tfoot>
              </table>   
            <div id="pager" class="tab_container">


      </div>
    </article>

和jquery代码：

            function renderMsgDetail(result) {
            var dtMsgDetailData = [];
            $.each(result, function () {
                dtMsgDetailData.push([
                    this.Date1,
                    this.Date2

                ]);
            });

            var oTable = $('#tblMessageDetail').dataTable({
                "aaData": dtMsgDetailData,
                "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "ALL"]],
                'asStripClasses': null,
                "iDisplayLength": 10
            });


            $("#btnFilterMd").click(function (event) {
                event.preventDefault();
                alert($('#from').val());
                alert($('#to').val());
            });

Answer 1

如果您使用datatable插件（www.datatables.net）。

你有一个可以适应的解决方案：

http://www.datatables.net/release-datatables/examples/api/multi_filter.html

我认为您需要一个显示值日期或消息日期值的列，以便您可以应用过滤器，否则，javascript将不知道如何过滤。

看看这一行：

 oTable.fnFilter( this.value, $("tfoot input").index(this) );

第二个值是您要过滤值的列的索引。

另一种解决方案：ajax调用过滤数据并填充表格。

使用日期范围过滤数据表

1 个答案: