Я интегрировал данные для своей таблицы с некоторым столбцом и столбцом со значением 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>