2016-10-14 2 views
0

날짜 범위 필터가있는 서버 측 데이터 테이블 구현을 추가하려고합니다. 필터는 데이터를 필터링하지 않습니다. 나는 그것이 어디에서 깨고 있는지 전혀 모른다. 내가 어디로 잘못 가고 있는지 알아 내는데 당신의 도움이 필요합니다.Datatables Date Range 필터가 작동하지 않습니다.

여기에 스크립트가 있습니다.

 

    $(document).ready(function() { 
        'use strict'; 
        var dataTable = $('#employee-grid').DataTable({ 
         "processing": true, 
         "serverSide": true, 
         "sScrollY": "300px", 
         "iDisplayLength": 25, 
         "bJQueryUI": true, 
         "bStateSave": true, 
         "ajax": { 
          url: "employee-grid-data.php", // json datasource 
          type: "post", // method , by default get 
          error: function() { // error handling 
           $(".employee-grid-error").html(""); 
           $("#employee-grid").append('No data found in the server'); 
           $("#employee-grid_processing").css("display", "none"); 

          } 
         }, 
         "tableTools": { 
          "sSwfPath": "swf/copy_csv_xls_pdf.swf", 
          "aButtons": [ 

           { 
            "sExtends": "collection", 
            "sButtonText": "Export", 
            "aButtons": ["csv", "xls", "pdf", "print"] 
           } 
          ] 
         } 
        }); 
        function myCustomFilterFunction(filterVal, columnVal) { 
         var found; 
         if (columnVal === '') { 
          return true; 
         } 


         if (found !== -1) { 
          return true; 
         } 
         return false; 
        } 
        var oTable = $('#employee-grid').dataTable().yadcf([{ 
         column_number: 0, 
         filter_container_id: 'external_filter_container_0', 
         filter_type: "auto_complete", 
         text_data_delimiter: "," 
        }, { 
         column_number: 1, 
         filter_container_id: 'external_filter_container_1', 
         filter_type: "auto_complete", 
         text_data_delimiter: "," 
        }, { 
         column_number: 2, 
         filter_container_id: 'external_filter_container_2', 
         filter_type: "auto_complete", 
         text_data_delimiter: "," 
        }, { 
         column_number: 3, 
         filter_container_id: 'external_filter_container_3', 
         filter_type: 'range_date', 
         date_format: 'mm/dd/yyyy' 
        }, { 
         column_number: 4, 
         filter_container_id: 'external_filter_container_4', 
         data: [{ 
          value: '1', 
          label: 'Yessss :)' 
         }, { 
          value: '0', 
          label: 'Noooo :(' 
         }], 
         filter_default_label: "Select Yes/No" 
        }], { 
         externally_triggered: true 
        }); 






       }); 

그리고 여기가 HTML을 서버 측에

<div class="container"> 

      <div id="externaly_triggered_wrapper" class=""> 
      <div> 
       <span>First name:</span> 
       <span id="external_filter_container_0"></span> 
      </div> 
      <div> 
       <span>Last name:</span> 
       <span id="external_filter_container_1"></span> 
      </div> 
      <div> 
       <span>Email:</span> 
       <span id="external_filter_container_2"></span> 
      </div> 
      <div> 
       <span>Date Filter:</span> 
       <span id="external_filter_container_3"></span> 
      </div> 
      <div> 
       <span>Newsletter:</span> 
       <span id="external_filter_container_4"></span> 
      </div> 
      </div> 
      <div id="externaly_triggered_wrapper-controls"> 
      <div> 
       <input type="button" onclick="yadcf.exFilterExternallyTriggered(oTable);" value="Filter" class="some_btn general_btn"> 
       <input type="button" onclick="yadcf.exResetAllFilters(oTable);" value="Reset" class="some_btn general_btn"> 
      </div> 
      </div>  
     <div class="container" style="width:760px !important;"> 
      <table id="employee-grid" cellpadding="0" cellspacing="0" border="0" class="display" width="100%"> 
        <thead> 
         <tr> 
          <th>First Name</th> 
          <th>Last name</th> 
          <th>Email</th> 
          <th>Date added</th> 
          <th class="ui-state-default" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Yes/No: activate to sort column ascending" style="width: 235px;"> 
           <div class="DataTables_sort_wrapper" style="display: inline-block;">Yes/No<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span></div> 
           <div id="yadcf-filter-wrapper--example1-2" class="yadcf-filter-wrapper"> 
            <select id="yadcf-filter--example1-2" class="yadcf-filter " onchange="yadcf.doFilter(this, '-example1', 2, 'contains');" onkeydown="yadcf.preventDefaultForEnter(event);" onmousedown="yadcf.stopPropagation(event);" onclick="yadcf.stopPropagation(event);"> 
             <option value="-1">Select Yes/No</option> 
             <option value="Yes">Yessss :)</option> 
             <option value="No">Noooo :(</option> 
            </select> 
            <button type="button" id="yadcf-filter--example1-2-reset" onmousedown="yadcf.stopPropagation(event);" onclick="yadcf.stopPropagation(event);yadcf.doFilter('clear', '-example1', 2); return false;" class="yadcf-filter-reset-button ">x</button> 
           </div> 
          </th> 
         </tr> 
        </thead> 

      </table> 
     </div> 
+0

어떻게 서버 측 코드에 날짜 범위 매개 변수를 전달합니까? – markpsmith

+0

자바 스크립트로 생성되었습니다. 나는이 예제를 http://yadcf-showcase.appspot.com/dom_source_externally_triggered.html로 사용하고 있으며 자바 스크립트 페이지에있다. 다음은 서버의 https://github.com/vedmack/yadcf/blob/master/jquery.dataTables.yadcf.js로 전달되는 날짜의 시작과 끝을 나타내는 js 파일입니다. –

답변

0

, 당신은 range_date 얻을 검색 텍스트가의 구분, 예를 들어 있습니다

01/05/2017-yadcf_delim-20/05/2017

따라서 다음과 같은 코드를 사용하여 분할해야합니다.

searchText.Split(new string[] { "-yadcf_delim-" }, StringSplitOptions.None) 
관련 문제