Answers

• jLinux Posts: 981Questions: 73Answers: 75

  April 2016

  All you have to do is load the JS/CSS files for the plugin, and the DataTables JS/CSS as well.. Then it depends how the plugin is initiated. usually DT plugins are initiated by adding some settings to the $().DataTable({ /* CONFIG.. */ }) config..

  For the one you linked, it looks like you just need to add event listeners..

  Its right there in the Example on the page you linked
• ioup Posts: 4Questions: 2Answers: 0

  April 2016

  jLinux this is the script I have for the DT:

  <script type="text/javascript">
    $(document).ready( function () {
      $('#table_id').DataTable();
    });
    $(function () {
      $('#datetimepicker1').datetimepicker(function() { table.draw(); });
      $('#datetimepicker2').datetimepicker(function() { table.draw(); });
    });
  </script>
  

  and this is my table:

  <h2 class="sub-header"> <?= h($festival->name) ?> </h2>
      <div class="">
        <div>
          <?php if (true){ ?>
            <div id="payments">
              <div class='col-sm-6'>
                <div class="form-group">      
                  <div class='input-group date' id='datetimepicker1'>
                    <input id="min" type='text' class="form-control" />
                    <span class="input-group-addon">
                      <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                  </div>
                </div>
              </div>
              <div class='col-sm-6'>
                <div class="form-group">    
                  <div class='input-group date' id='datetimepicker2'>
                    <input id="max" type='text' class="form-control" />
                      <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                      </span>
                  </div>
                </div>
              </div>
              <table class="table table-striped table-bordered dataTable no-footer" id="table_id" style="cellpadding=0; cellspacing=0">
                <thead>
                  <th class="sort" data-sort="id">Id</th>
                  <th class="sort" data-sort="date">Date</th>
                  <th class="sort" data-sort="payment_code">Booking Code</th>
                  <th class="sort" data-sort="travellersinfo">Travellers Info</th>
                </thead>
              <tbody class="list">
                  <td class="id"> --- </td>
                  <td class="date"> --- </td>
                  <td class="payment_code"> --- </td>
                  <td class="travellersinfo"> --- </td>
  ...
  

  I made the imports and it shows the inputs to choose a date but it doesn't do anything more other than it already did. As I choose a date nothing is filtered in the table.

  What I'm doing wrong?
• allan Posts: 63,761Questions: 1Answers: 10,510 Site admin

  April 2016 Answer ✓

  You don't have any filtering logic - you've got two calendars and a DataTable, but the know nothing about each other. You'd need some custom filtering logic like in the example you linked to above.

  See also the custom search plug-in documentation.

  Allan