JQuery Datatables和Bootstrap 3 datepicker

Question

我正在使用JQuery數據表對數據排序某些表。 我使用自定義項目排序，在我的情況下，我有一個選擇元素，其中一列的排序。這工作。 我也有2個輸入作爲datepickers。 這些選取器的數據格式與表格相同，因此過濾效果很好，但我的問題是：

是否可以根據採集器的範圍過濾列？例如： 從2017年9月1日到2017年10月10日？

我正在尋找datatables文檔中的一些自定義函數，但我什麼都沒發現，所以這就是爲什麼我要求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.