Search on a rendered column using serverSide

joeDiHare

I am trying to filter using search() on a datatables table that is loaded with ajax using serverSide: True.

The problem is that the search is meant on the rendered values of a column, and not on the values themselves.

In other words, a column owned_cars is rendered using the data object cars, which contains multiple entries for each person row (eg, person element "10" might have person[10].car = {fiat,ford'}), but my search only needs to access the combined string with cars (ie."fiat; ford"`).

How should I do this with serverSide? With the code below I get a ajax error (www.datatables.net/tn/7).

index.html:

<div class="row">

  <div id="filter_col3">
    <input placeholder="Filter cars" class="column_filter" id="col3_filter" data-column="3" type="text">
  </div>

  <div class="table-responsive">
    <table id='list-data-table' class='table'>
      <thead>
        <tr>
          <th data-data="id">ID</th>
          <th data-data="name">Name</th>
          <th data-data="size">File Size</th>
          <th data-data="cars">Owned Cars</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>

</div>


<script type="text/javascript">

  function filterColumn () {
    $('#list-data-table').DataTable()
      .column(3).search($('#col3_filter').val(), false, true).draw();
  }

  $(document).ready(function() {
    $(document.getElementById( 'list-data-table')).DataTable({
      serverSide: true,
      processing: true,
      ajax: {
        url:  "{% url 'res-db-list' %}" + "?format=datatables",
        data: data
      },
      columnDefs: [
        {
           'render': function (data, type, row) {
             if (type == "sort" || type == 'type')
               return data;
              var cell='';
              for (i = 0; i < data.length; i++) {
                cell += data[i]['car'] + '; ';
               }
               return cell;
            },
           'targets': 3
        }];
    });

   /// Register filter
    $('.column_filter').on( 'change', function () {
      filterColumn( );
    } );
  }
</script>

nin_bound

As far as I know, once you have a datatable to load data via server side, you also have to do the filtering server side too.

I have used a third party plugin called yadcf which enabled me to do filtering with server values.

https://github.com/vedmack/yadcf

Something like

        yadcf.exFilterColumn(mytable, [[columnNumber, '']], true);