CODEWITHSUNDEEP
yadcf
Lou K
Lou K

Reputation: 1138

yadcf clear filter when using date_custom_func still causes last date to be supplied to custom_func

I have a table with start and finish dates in the rows, and I want to create a date filter which chooses rows for which the date in the filter is between the start and finish dates. The start or finish dates might be empty which means "unspecified" so the range is open on that side of the start/finish span.

I messed around with range date on the two columns but wasn't able to get that to work, and decided the best solution was probably to use the date_custom_func. This works for the most part, but seems like clearing the date in the filter causes the filterVal in the custom_func to be passed the last value of the filter rather than ''.

I think this is a bug but know https://stackoverflow.com/users/617373/daniel prefers to see things first on stackoverflow to triage.

Reference https://jsbin.com/cixawez/edit?html,js,output

Steps to cause problem:

Second problem is exFilterColumn doesn't seem to have any case handling for filter_type = 'date_custom_func', so has no effect on the filter.

My initialization:

$(document).ready(function() {
    var table = $("#tbl").DataTable({
        dom: "Bfrtip",
        columns: [
            { data: 'name', name: 'name' },
            { data: 'startdate', name: 'startdate', type: 'datetime' },
            { data: 'finishdate', name: 'finishdate', type: 'datetime' },
        ],
    });

function yadcf_between_dates(fromdateattr, todateattr) {
    function yadcf_between_dates_fn(filterVal, columnVal, rowValues, stateVal) {
        console.log('filterVal='+filterVal);
        console.log('columnVal='+columnVal);
        console.log('rowValues='+rowValues);
        console.log('stateVal='+stateVal);

        if (filterVal === '') {
          return true;
        }
      
        if (    (stateVal[fromdateattr] === '' || filterVal >= stateVal[fromdateattr])
             && (stateVal[todateattr] === ''   || filterVal <= stateVal[todateattr])) {
            
            return true;
              
        } else {
          return false;
        }
    }
    return yadcf_between_dates_fn;
}

yadcf.init(
  table,
  [
    {
      column_selector: 'startdate:name',
      filter_type: 'date_custom_func',
      custom_func: yadcf_between_dates('startdate', 'finishdate'),
      filter_container_id: 'filter-container',
      date_format: 'yyyy-mm-dd',
    },
  ]
);

  // second problem is exFilterColumn doesn't seem to work for date_custom_func, there's
  // no case handling for that filter_type
  var today = new Date();
  today = today.toISOString().substr(0,10);
  var startdate = table.column('startdate:name').index();
  yadcf.exFilterColumn(table,[[startdate, today]]);
  
  
  });

the html (for completeness)

<!DOCTYPE html>
<html>
  <head>
    
    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
    
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment-with-locales.min.js"></script>

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/dataTables.jqueryui.css"/>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/dataTables.jqueryui.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.4-beta.45/jquery.dataTables.yadcf.css" integrity="sha512-u7Rj4AxBJlMX6GXYVig6earpVdk4dxdZfT2nJFo2OJmB9j2PSY7CrIRtXWuELPTZbLdqk7oNQlsnxOfhYA7KSw==" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.4-beta.45/jquery.dataTables.yadcf.js" integrity="sha512-iOI77irpDUJ8r06rUaeBfn6ZUmsWZJB0PsmZdtRuHjfhkw5JhmBXvxl1frwrxBHlD/pUUIEeDln/njSvcZx5sA==" crossorigin="anonymous"></script>
    
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
<body>
  <span>in start/finish span: </span><span id='filter-container'></span>
  <table id=tbl>
  <thead>
    <tr>
      <th>name</th>
      <th>start</th>
      <th>finish</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>fred</td>
      <td>2020-01-19</td>
      <td></td>
    </tr>
     <tr>
      <td>jill</td>
      <td>2020-12-20</td>
      <td>2020-12-31</td>
    </tr>
     <tr>
      <td>toby</td>
      <td>2020-12-20</td>
      <td></td>
    </tr>
  </tbody>
</table>
  </body>

Upvotes: 1

Views: 225

Answers (0)

Related Questions