0

好的，

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

用户从范围选择器中选择日期用户然后选择值日期或消息日期单选按钮用户单击过滤器按钮，并根据他们的选择选择数据过滤器。

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

从 03/04/2012 到 03/04/2011 在起息日列。

任何指针？

代码原样：

         <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());
            });
4

1 回答 1

0

如果您使用数据表插件 (www.datatables.net)。

您有一个可以在这里调整的解决方案：

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

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

看线：

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

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

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

于 2013-04-05T11:15:11.263 回答