按DatePicker筛选HTML表在两个日期之间

时间:2019-01-30 11:29:19

标签: javascript jquery html datepicker metronic

我读了很多关于在两个日期之间按日期选择器过滤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>&nbsp;<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>

0 个答案:

没有答案