How do I use a plugin?

ioup

Hi I'm new around here and it's the first time I use datatables.
I want to use the date range plugin but I don't really know how to do it.
If someone could explain it to me that would be great because I found the info in here https://datatables.net/plug-ins/filtering/row-based/range_dates not that explicit.

jLinux

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

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

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