JQuery 数据表和 Bootstrap 3 日期选择器

Question

我正在使用 JQuery 数据表对一些包含数据的表进行排序。 我正在使用自定义项目进行排序，在我的情况下，我有一个选择元素，可以对其中一列进行排序。这有效。 我还有 2 个输入用作 datepickers。 这些选择器的数据格式与表格相同，因此过滤效果很好，但我的问题是：

是否可以根据选择器的范围过滤列？例如： 从 2017 年 9 月 1 日到 2017 年 9 月 10 日？

我正在数据表文档中寻找一些自定义函数，但我一无所获，所以这就是我询问 StackOverflow 社区的原因。

我想我需要检查何时选择了第二个日期，然后基于此获取第一个日期选择器和过滤列的数据。但是为了方便起见，当第一个选择器被选中时，我将只显示第二个选择器，因此用户可能知道选择第一个选择器将触发也需要选择第二个选择器....

$(document).ready(function() {

    var table = $('#scroll-wrc-changes-table table').DataTable({
        "paging": false,
    });

    var picker1 = $('#datetimepicker1').datetimepicker({
        format: 'DD MMM YYYY',
        defaultDate: new Date(),
    });
    var picker2 = $('#datetimepicker2').datetimepicker({
        format: 'DD MMM YYYY',
        defaultDate: new Date(),
    });

    picker1.on('dp.change',function() {
        table.columns([3] ).search( this.value ).draw();

    });

    picker2.on('dp.change',function() {
        table.columns([3] ).search( this.value ).draw();
    });

    // This is just select element
    $('#table-select').change(function() {
        table.columns([2] ).search( this.value ).draw();
    })

});

Answer 1

也许这个链接可以帮助你。 Range Filtering

这个想法是为自定义过滤制作功能。

$.fn.dataTable.ext.search.push(
  function( settings, data, dataIndex ) {
    var date1 = new Date( $('#datetimepicker1').val() );
    var date2 = new Date( $('#datetimepicker2').val() );
    var dateData = new Date( data[3] ); // use data from the date column

    if ( dateData >= date1 && dateData <= date2 )
    {
        return true;
    }
    return false;
});

希望对您有所帮助..

Answer 2

Asuming you are using ajax datatable . If not draw idea from this example 
Add a row where you can set range for filter as:
<div class="col-md-3"> <label>From:</label> <input readonly="readonly" type="text" id="mindate" class="srchdp"> <i class="fa fa-times-circle-o" id="clear-mindate"></i></div>
                            <div class="col-md-3"> <label>To:</label> <input readonly="readonly" type="text" id="maxdate" class="srchdp"> <i class="fa fa-times-circle-o" id="clear-maxdate" ></i></div>
                            <div class="col-md-2"><button class="btn btn-primary" id="filter-record">Filter</button></div>

//initialize datepicker as

            $("input:text.srchdp").datetimepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: "-100:+0",
            dateFormat: 'mm/dd/yy',
            controlType: 'select',
            timeFormat: 'hh:mm:ss TT',
        })

// now keep a event on filter button click


    $(document).on("click", "#filter-record", function () {

            assetListVM.search("").draw(); 
        });

// now on ajax request 

       public ActionResult Get([ModelBinder(typeof(DataTablesBinder))] IDataTablesRequest requestModel, string mindate,string maxdate, string searchbase)
        {
            DataBaseEntities db = new DataBaseEntities();
            IQueryable<Wishlist> query = db.Wishlists;
            var totalCount = query.Count();

            #region Filtering
            // Apply filters for searching

                var value = requestModel.Search.Value.Trim();
            if (!string.IsNullOrEmpty(searchbase))
            {
                if (!string.IsNullOrEmpty(mindate) && !string.IsNullOrEmpty(maxdate))
                {
                    DateTime datevaluemin;
                    DateTime datevaluemax;
                    var mindateval = DateTime.TryParse(mindate, out datevaluemin);
                    var maxdateval = DateTime.TryParse(mindate, out datevaluemax);

                    if (mindateval && maxdateval)
                    {
                        var minvalue = Convert.ToDateTime(mindate);
                        var maxvalue = Convert.ToDateTime(maxdate);
                        if (searchbase == "CreatedDate")
                        {
                            query = query.Where(p =>
                                                p.CreatedDate >= minvalue
                                                && p.CreatedDate <= maxvalue);
                        }
                    }
                }
                else if (!string.IsNullOrEmpty(mindate))
                {
                    DateTime datevalue;
                    var mindateval = DateTime.TryParse(mindate, out datevalue);

                    if (mindateval)
                    {
                        var minvalue = Convert.ToDateTime(mindate);
                        if (searchbase == "CreatedDate")
                        {
                            query = query.Where(p =>
                                                p.CreatedDate >= minvalue
                                                );
                        }

                    }
                }
            }
            if (requestModel.Search.Value != string.Empty)
            {      
                    query = query.Where(p => p.Id.ToString().Equals(value) ||
                             p.ProductId.ToString().Equals(value) ||
                             p.MemberId.ToString().Contains(value)


                       );                
            }

            var filteredCount = query.Count();

            #endregion Filtering

            #region Sorting
            // Sorting
            var sortedColumns = requestModel.Columns.GetSortedColumns();
            var orderByString = String.Empty;

            foreach (var column in sortedColumns)
            {
                orderByString += orderByString != String.Empty ? "," : "";
                orderByString += (column.Data) + (column.SortDirection == Column.OrderDirection.Ascendant ? " asc" : " desc");
            }

            query = query.OrderBy(orderByString == string.Empty ? " asc" : orderByString);

            #endregion Sorting

            // Paging
            query = query.Skip(requestModel.Start).Take(requestModel.Length);


            var data = query.Select(asset => new
            {
                Id = asset.Id,
                ProductId = asset.ProductId,
                ProductName = asset.Product.ProductName,           
                MemberId=asset.MemberId,
                CreatedDate = asset.CreatedDate.ToString(),
            }).ToList();

            return Json(new DataTablesResponse(requestModel.Draw, data, filteredCount, totalCount), JsonRequestBehavior.AllowGet);
        }
    }
}


this code is not complete hence it doesn't work alone.