Фильтрация таблицы HTML по DatePicker между двумя датами

Я прочитал много тем о фильтрации html-таблицы по средству выбора даты между двумя датами, но я использую html-таблицу данных metronics. Это позволяет вам искать по идентификатору, помещая значение datepicker в поиск, но я хочу фильтровать строки в определенном диапазоне дат, выбирая из 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 ответов

Другие вопросы по тегам