jQuery DataTables日期范围样式

Question

我有一个像这样的部分视图:

<div style="float: right;">
    <div class="col-sm-12 col-md-3">
        <div class="input-group date datetimepicker">
            <input id="Min-Date" type="text" class="form-control" placeholder="Start Date" />
            <span class="input-group-addon">
                <span class="fa fa-calendar"></span>
            </span>
        </div>
    </div>

    <span class="col-md-1 fa fa-minus text-center" style="margin-top: 1%;"></span>

    <div class="col-sm-12 col-md-3">
        <div class="input-group date datetimepicker">
            <input id="Max-Date" type="text" class="form-control" placeholder="End Date" />
            <span class="input-group-addon">
                <span class="fa fa-calendar"></span>
            </span>
        </div>
    </div>
</div>





<table id="Test-Table" class="table table-striped">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.randomClass.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ReportDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Attachment)
            </th>
            <th></th>
        </tr>
    </thead>
    <tfoot id="Table-Tfoot">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.randomClass.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ReportDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Attachment)
            </th>
            <th></th>
        </tr>
    </tfoot>

    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.randomClass.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ReportDate)
                </td>

                <td>
                    <a href="@Url.Content(item.Attachment)" target="_blank">@Path.GetFileName(item.Attachment)</a>
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", "tblAttachments", new { id = item.ID }, null) |
                    @Html.ActionLink("Delete", "Delete", "tblAttachments", new { id = item.ID })
                </td>
            </tr>
        }
    </tbody>
</table>

我正在使用jQuery DataTables来进行搜索,分页和排序.这是我的jQuery.

@section scripts{
    <script>
        $(document).ready(function () {

            // https://datatables.net/examples/api/multi_filter.html

            var total = $("#Table tfoot th").length;

            $("#Table tfoot th").each(function (index) {
                if (index !== total - 1) {
                    var title = $(this).text().trim();
                    $(this).html('<input type="text" class="form-control" placeholder="Search ' + title +'"/>');
                }
            });


            var table = $("#Test-Table").DataTable({
                "bFilter": false // hide searchbox
            });

            table.columns().every(function () {
                var that = this;

                $('input', this.footer()).on('keyup change',
                    function () {
                        if (that.search() !== this.value) {
                            that
                                .search(this.value)
                                .draw();
                        }
                    });
            });
        });
    </script>
}

正如您所看到的,我隐藏了jQuery数据表标准的初始搜索框..因为我希望能够按日期范围进行过滤.

我已经研究了这个,但是我不喜欢这些盒子在分页下拉列表之上的方式..所以我的......右上方的搜索框已经消失了......我希望两个input人能够把它放在那里.我怎么能通过CSS做到这一点？

任何帮助表示赞赏.

以下是它现在的样子:

Answer 1

尝试这个plunker演示希望这会让你得到你的解决方案

http://plnkr.co/edit/mdeEYoZtnvpfHCdtSxDP?p=preview

$(function() {
  var oTable = $('#datatable').DataTable({
    "oLanguage": {
      "sSearch": "Filter Data"
    },
    "iDisplayLength": -1,
    "sPaginationType": "full_numbers",

  });




  $("#datepicker_from").datepicker({
    showOn: "button",
    buttonImage: "images/calendar.gif",
    buttonImageOnly: false,
    "onSelect": function(date) {
      minDateFilter = new Date(date).getTime();
      oTable.fnDraw();
    }
  }).keyup(function() {
    minDateFilter = new Date(this.value).getTime();
    oTable.fnDraw();
  });

  $("#datepicker_to").datepicker({
    showOn: "button",
    buttonImage: "images/calendar.gif",
    buttonImageOnly: false,
    "onSelect": function(date) {
      maxDateFilter = new Date(date).getTime();
      oTable.fnDraw();
    }
  }).keyup(function() {
    maxDateFilter = new Date(this.value).getTime();
    oTable.fnDraw();
  });

});

// Date range filter
minDateFilter = "";
maxDateFilter = "";

$.fn.dataTableExt.afnFiltering.push(
  function(oSettings, aData, iDataIndex) {
    if (typeof aData._date == 'undefined') {
      aData._date = new Date(aData[0]).getTime();
    }

    if (minDateFilter && !isNaN(minDateFilter)) {
      if (aData._date < minDateFilter) {
        return false;
      }
    }

    if (maxDateFilter && !isNaN(maxDateFilter)) {
      if (aData._date > maxDateFilter) {
        return false;
      }
    }

    return true;
  }
);