Filter jQuery dataTables on negative integer

Question

I can sort a dataTable on negatives just fine, but I wanted to filter instead of sort on a select.change() event. Basically, I just need it to take the value of column 4 and render the row based on the select box selection { all, positive, or negative }.

<table class="data-table">
    <thead>
      <tr>
        <th>Text</th>
        <th>Text</th>
        <th>Text</th>
        <th>Value</th>
      </tr>
    </thead>
    <tbody>
      <tr>
         <td>Lorem</td>
         <td>Ipsum</td>
         <td>Dolor</td>
         <td>$1.99</td>
      </tr>
      <tr>
         <td>Lorem</td>
         <td>Ipsum</td>
         <td>Dolor</td>
         <td>$2.99</td>
      </tr>
      <tr>
         <td>Lorem</td>
         <td>Ipsum</td>
         <td>Dolor</td>
         <td>$-1.99</td>
      <tr>
         <td>Lorem</td>
         <td>Ipsum</td>
         <td>Dolor</td>
         <td>$-2.99</td>
      </tr>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="4">
          <select class="select-filter">
            <option value="1">All</option>
            <option value="2">Positive</option>
            <option value="3">Negative</option>
          </select>
      </tr>
    </tfoot>
</table>

Then I've tried a couple of js:

$(function(){
    $(".data-table").dataTable();
    $('.select-filter').change(function(){oTable.fnDraw();});
});

But the one that "looks" easiest to make do what I want is:

$(".data-table").dataTable().columnFilter({
    aoColumns: [
      null,
      null,
      null,
      {type: "select"}
    ]
});

Although, that one will just create a select that contains all the values. How can I accomplish this?

Bumptious Q Bangwhistle · Accepted Answer · 2017-12-02 22:30:39Z

3

Here's one way: http://jsfiddle.net/AGsPA/

'myFilter' is the ID of the select. afnFiltering allows you to add your own custom filter to the datatable. Note that the filter function below is simple - anything without a dash in your Value column will be considered positive (this includes blanks). Anything with a dash is negative.

var myFilter = $('#myFilter');

$.fn.dataTableExt.afnFiltering.push(
    function( oSettings, aData, iDataIndex ) {
        if (myFilter.val() == 1)
            return true;
        else if (myFilter.val() == 2)
            return (aData[3].indexOf('-') == -1);
        else
            return (aData[3].indexOf('-') != -1);
    }
);
myFilter.change(function () { $('#myTable').dataTable().fnDraw(); });

You might also be interested in this: DataTables Column Filter Add On

edited Dec 2, 2017 at 22:30

answered May 28, 2013 at 0:55

Bumptious Q Bangwhistle

4,7692 gold badges36 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mg1075 · Accepted Answer · 2013-05-28 00:55:39Z

Here's one way, although I do not propose this as the "best way". The example is posted in jsbin.

http://jsbin.com/afogup/2/edit

Note the first column, which will be hidden, but that contains either "2" or "3" for positive and negative.

  <tr>
    <th>Filter Val</th>
    <th>Text</th>
    <th>Text</th>
    <th>Text</th>
    <th>Value</th>
  </tr>

Note the datatables documentation for using select elements as filters.
http://www.datatables.net/examples/api/multi_filter_select.html

Then note the call to make the datatable.

$(document).ready(function() {
    /* Initialise the DataTable */
    var oTable = $('#example').dataTable( {
      "aoColumnDefs": [
          { "bVisible": false, "aTargets": [ 0 ] }
       ],
       "oLanguage": {
           "sSearch": "Search all columns:"
       }
    });

    /* select menu in the table footer */

   $('select.select-filter').change( function () {
      var selectVal = parseInt($(this).val(), 10); 
      if (selectVal === 1) {
          oTable.fnFilter( "", 0 );
      } else {   
          oTable.fnFilter( selectVal, 0 );         
      }
    });
});

Collectives™ on Stack Overflow

Filter jQuery dataTables on negative integer

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related