我读了很多关于在两个日期之间按日期选择器过滤html表的主题,但是我正在使用metronics html数据表。它允许您通过将datepicker值放入搜索中来按ID进行搜索,但我想通过从datepicker中进行选择来过滤特定日期范围内的行。
其他搜索和过滤功能运行完美,但是我不知道如何使用这些从头到尾的输入过滤来实现日期范围。 我的约会工具。
var DatatableHtmlTableDemo = function() {
//== Private functions
// demo initializer
var demo = function() {
var datatable = $('.m-datatable').mDatatable({
data: {
saveState: {cookie: false},
},
search: {
input: $('#generalSearch'),
},
columns: [
{
field: 'DepositPaid',
type: 'number',
},
{
field: 'OrderID',
type: 'number',
},
{
field: 'OrderDate',
type: 'date',
format: 'DD/MM/YYYY',
}, {
field: 'Status',
title: 'Status',
// callback function support for column rendering
template: function(row) {
var status = {
1: {'title': 'Alındı', 'class': 'm-badge--brand'},
2: {'title': 'İşlemde', 'class': ' m-badge--success'},
3: {'title': 'Kapandı', 'class': ' m-badge--metal'},
};
return '<span class="m-badge ' + status[row.Status].class + ' m-badge--wide">' + status[row.Status].title + '</span>';
},
},{
field: 'Owner',
title: 'Owner',
// callback function support for column rendering
template: function(row) {
var status = {
1: {'title': 'Ana Kademe', 'class': 'm-badge--success'},
2: {'title': 'Gençlik Kolları', 'class': ' m-badge--primary'},
3: {'title': 'Kadın Kolları', 'class': ' m-badge--danger'},
};
return '<span class="m-badge ' + status[row.Status].class + ' m-badge--wide">' + status[row.Status].title + '</span>';
},
}, {
field: 'Type',
title: 'Type',
// callback function support for column rendering
template: function(row) {
var status = {
<?php
$komut = $db->prepare("SELECT * FROM kullanici_ilceler INNER JOIN ilceler ON kullanici_ilceler.ilce_no = ilceler.ilce_no WHERE kullanici_no = :kno");
$komut->bindParam(':kno', $_COOKIE["user_id"], PDO::PARAM_STR); // PDO::PARAM_INT , PARAM_STR
$komut->execute();
$komut->setFetchMode(PDO::FETCH_ASSOC);
while($satir = $komut->fetch()) {
echo $satir["ilce_no"].": {'title': '".$satir["ilce_adi"]."', 'state': 'primary'}, ";
}
?>
};
return '<span class="m-badge m-badge--' + status[row.Type].state + ' m-badge--dot"></span> <span class="m--font-bold m--font-' +
status[row.Type].state + '">' +
status[row.Type].title + '</span>';
},
},
],
});
$('#m_form_status').on('change', function() {
datatable.search($(this).val().toLowerCase(), 'Status');
});
$('#m_form_type').on('change', function() {
datatable.search($(this).val().toLowerCase(), 'Type');
});
$('#m_form_status, #m_form_type').selectpicker();
$('#m_datepicker').datepicker({
todayHighlight: true,
templates: {
leftArrow: '<i class="la la-angle-left"></i>',
rightArrow: '<i class="la la-angle-right"></i>',
},
});
};
return {
//== Public functions
init: function() {
// init dmeo
demo();
},
};
}();
jQuery(document).ready(function() {
DatatableHtmlTableDemo.init();
});
<input id="from" type="text" class="form-control m-input" name="start" placeholder="From">
<input id="to" type="text" class="form-control m-input" name="end" placeholder="To">
<table>
<thead>
<tr>
<th title="Field #1" data-field="OrderID">Talep NO</th>
<th title="Field #6" data-field="Color">Vatandaş TC</th>
<th title="Field #7" data-field="DepositPaid">Vatandaş Adı</th>
<th title="Field #5" data-field="CarModel">Talep Başlığı</th>
<th title="Field #2" data-field="Type">Talebi Alan İlçe</th>
<th title="Field #3" data-field="Contact">Talep Konusu</th>
<th title="Field #10" data-field="Owner">Talebi Alan Kademe</th>
<th title="Field #9" data-field="Status">Talep Durumu</th>
<th title="Field #9" data-field="Date">Talep Tarihi</th>
</tr>
</thead>
</table>