поиск данных по флажку вместо текстового поля - PullRequest
0 голосов
/ 17 апреля 2020

Я интегрировал данные для своей таблицы с некоторым столбцом и столбцом со значением stati c значение 'yes / No'. Я создал поля как флажок в строке поиска, а другой как текстовое поле. Кнопка сброса не продается в розницу с моей исходной таблицей и да | нет фильтра не работает, который я использовал в флажке.

jQuery(document).ready(function($){
$("#edit-reset").click(function(e) {
		e.preventDefault();
		table.draw();
		$("#ItemID").val('');
		$("#edit-from-date").val('');
		$("#edit-to-date").val('');
		
		$('#search').click(); 
		return false;
	});
var table = jQuery(".views-table").DataTable( {
        
		
		
		
		dom: 'Bfrtip',
		/*"columnDefs": [ {
            "targets": 0,
            "data": null,
            "defaultContent": "<input type='search' id='fname' name='fname'>"
        } ],*/
		
        buttons: [{
                 text: '<img src="http://gdprconcentform_unsubscribe/themes/bartik/images/download.png">',                       
                 extend: 'excelHtml5',
                 "order": [],
                 exportOptions: {
                     modifier: {
                         selected: true
                     },
                     format: {
                         header: function (data, columnIdx) {
                             return data;
                         },
                         body: function (data, column, row) {
                             return data;
                         }
                     }
                 },"pagingType":'simple_numbers',
                 footer: true,
                 customize: function (xlsx) {
                     var sheet = xlsx.xl.worksheets['sheet1.xml'];
                 }
             }],
		"paging": false,
		/*"searching": false,*/
		"sorting" :false
    } );
	/*$("body").on('click','#Search',function(){
	alert("click");*/
	/*$('#ItemID').on('keyup change', function () {
	$('#ItemID').keyup(function (){
   table.column(1).search($(this).val()).draw();
});*/
//});
$('#Search').click(function () {

        table.column(1).search($("#ItemID").val()).draw();
		
		table.draw(); 
		if ($("#edit-check").is(':checked')) {
table.column(3).search($("#edit-check").val()).draw();
}
    });

   
    $("#ItemID").keypress(function(e) {
                
        if(e.which === 13) {
            e.preventDefault(); // Prevent form submit
            table.column(1).search($(this).val()).draw();
        }
    });
	$("#edit-check").on('change', function(e) {
         alert("hai");       
         if ($(this).is(':checked')) {
		if(e.which === 13) {
            e.preventDefault(); // Prevent form submit
            table.column(3).search($(this).val()).draw();
        }
		}
    });

	$("#edit-from-date").datepicker({
	
   numberOfMonths: 1,
   dateFormat: 'mm/dd/yy',
changeMonth:true,
changeYear:true,
   onSelect: function (selected) {
       var dt = new Date(selected.replace(/\//g,' '));
	   //console.log(dt);
	   dt.setDate(dt.getDate() + 1);
	   $("#edit-to-date").datepicker("option", "minDate", dt);
       minDateFilter = new Date($('#edit-from-date').val());
	   
       //maxDateFilter=new Date('+1m');
       //table.draw();
   }
   }).attr('readonly','readonly').keyup(function(e) {
if(e.keyCode == 8 || e.keyCode == 46) {
$.datepicker._clearDate(this);
$(this).blur();
}
   });
   
   $("#edit-to-date").datepicker({
       numberOfMonths: 1,
       minDate:0,
changeMonth:true,
   changeYear:true,
       dateFormat: 'mm/dd/yy',
       onSelect: function (selected) {
           var dt = new Date(selected.replace(/\//g,' '));
		   //console.log(dt);
           dt.setDate(dt.getDate() - 1);
           $("#edit-from-date").datepicker("option", "maxDate",dt);
           maxDateFilter = new Date($('#edit-to-date').val());
           //table.draw();
       }
   }).attr('readonly','readonly').keyup(function(e) {
if(e.keyCode == 8 || e.keyCode == 46) {
$.datepicker._clearDate(this);
$(this).blur();
}
   });

$.fn.dataTable.ext.search.push(
           function( settings, data, dataIndex ) {
           
               var min =new Date($("#edit-from-date").val().replace(/\//g,' '));
               var max =new Date($("#edit-to-date").val().replace(/\//g,' '));
			   //console.log(max);
               var age = new Date(moment(data[4], "MM/DD/YYYY").format("MM DD YYYY") )|| 0; // use data for the age column
               //console.log(age);
			   if ( ( isNaN( min ) && isNaN( max ) ) ||
                    ( isNaN( min ) && age <= max ) ||
                    ( min <= age   && isNaN( max ) ) ||
                    ( min <= age   && age <= max ) )
               {
                   return true;
               }
               return false;
           }
        );




});
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-3.3.1.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
       <link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet">
  
    <!--script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script-->
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.flash.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>

<div class="input-group">
             Enter mail id:<input type="text" class="form-control" name="ItemID" id="ItemID" maxlength="50">       
      From Date: <input type = "text" id = "edit-from-date">
	   To Date: <input type = "text" id = "edit-to-date">
	     <!--input type = "checkbox" id = "edit-check" value="Yes"-->
		 <input type="checkbox" id = "edit-check">
<label>Yes</label>
	   <span class="input-group-btn">
             <button type="button" class="btn btn-default" id="Search">SEARCH</button>
			 <button type="button" class="btn btn-default1" id="edit-reset">RESET</button>
			
        </span>
	  </div>
	 <table class="views-table cols-7 dataTable no-footer" id="DataTables_Table_0" role="grid" aria-describedby="DataTables_Table_0_info">
         <thead>
      <tr role="row"><th class="views-field views-field-view-submission sorting" scope="col" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="
            #          : activate to sort column ascending" style="width: 9px;">
            #          </th><th class="views-field views-field-webform-component-1 sorting" scope="col" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="
            Business Email          : activate to sort column ascending" style="width: 192px;">
            Business Email          </th><th class="views-field views-field-webform-component-2 sorting" scope="col" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="
            Maybe your interest could be in one of the following          : activate to sort column ascending" style="width: 203px;">
            Maybe your interest could be in one of the following          </th><th class="views-field views-field-webform-component-3 sorting" scope="col" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="
            Please remove me from your list          : activate to sort column ascending" style="width: 129px;">
            Please remove me from your list          </th><</tr>
    </thead>
    <tbody>
          
          
          
          
          
      <tr class="views-row-first odd" role="row">
                  <td class="views-field views-field-view-submission">
            <a href="/gdpr_unsubscribe/node/1/submission/6">6</a>          </td>
                  <td class="views-field views-field-webform-component-1">
            sample@test.com          </td>
                  <td class="views-field views-field-webform-component-2">
            DevOps<br>Oracle Fusion          </td>
                  <td class="views-field views-field-webform-component-3">
            Yes          </td>
                  
              </tr><tr class="even" role="row">
                  <td class="views-field views-field-view-submission">
            <a href="/gdpr_unsubscribe/node/1/submission/7">7</a>          </td>
                  <td class="views-field views-field-webform-component-1">
            test1@dummy.com          </td>
                  <td class="views-field views-field-webform-component-2">
                      </td>
                  <td class="views-field views-field-webform-component-3">
            Yes          </td>
                  
              </tr><tr class="odd" role="row">
                  <td class="views-field views-field-view-submission">
            <a href="/gdpr_unsubscribe/node/1/submission/8">8</a>          </td>
                  <td class="views-field views-field-webform-component-1">
            test@sample.com          </td>
                  <td class="views-field views-field-webform-component-2">
            Service Now<br>DevOps          </td>
                  <td class="views-field views-field-webform-component-3">
                     NO </td>
                 
              </tr><tr class="even" role="row">
                  <td class="views-field views-field-view-submission">
            <a href="/gdpr_unsubscribe/node/1/submission/9">9</a>          </td>
                  <td class="views-field views-field-webform-component-1">
            test@sample.com          </td>
                  <td class="views-field views-field-webform-component-2">
                      </td>
                  <td class="views-field views-field-webform-component-3">
            Yes          </td>
                  
              </tr><tr class="views-row-last odd" role="row">
                  <td class="views-field views-field-view-submission">
            <a href="/gdpr_unsubscribe/node/1/submission/10">10</a>          </td>
                  <td class="views-field views-field-webform-component-1">
            mon@test.com          </td>
                  <td class="views-field views-field-webform-component-2">
            Integration Services<br>Cloud          </td>
                  <td class="views-field views-field-webform-component-3">
                      NO</td>
                  <
              </tr></tbody>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...