JQuery Datatables and Bootstrap 3 datepicker

Question

私はJQueryのデータ型を使ってデータを持つテーブルをソートしています。 私はカスタム項目を使ってソートしていますが、私の場合は列の1つをソートするselect要素があります。そしてこれはうまくいく。 私はまた、datepickersとして機能する2つの入力を持っています。 これらのピッカーは、テーブルと同じフォーマットのデータがあるため、フィルタリングはうまくいきますが、私の質問は次のとおりです。

ピッカーの範囲に基づいて列をフィルタリングすることは可能ですか？したがって、たとえば： から1 sep 2017 to 10 sep 2017？

私はdatatables docsでカスタム関数を探していましたが、何も見つかりませんでしたので、私はStackOverflowコミュニティに問い合わせています。

私は、2番目の日付が選択されたときにチェックして、これに基づいて最初のdatepickerとフィルタ列のデータを取得する必要があると思います。最初のピッカーが選択されている場合しかし、物事を容易にするために、

$(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.