Datatables custom filtering with server side

Question

I'm using DataTables and also using server side processing (Django).

I have a seperate textfield in which I use it to custom filter data in the DataTable after the table has been rendered already.

The following works just fine (I want to custom filter columns):

var table = $('#problem_history').DataTable( {
    "bJQueryUI": true,
    "aaSorting": [[ 1, "desc" ]],
    "aoColumns": [
      // various columns here
    ],
    "processing": true,
    "serverSide": true,
    "ajax": {
      "url": "/getdata",
      "data": {
        "friend_name": 'Robert'
      }
    }  
} );

So on the page load (initial load of the DataTable) it filters for 'Robert' just fine. But now I want to programmatically change the data to filter for "friend_name" == "Sara"

I already tried the following, the filteredData has a correct filtered object but the table itself does not redraw with the new filter.

var filteredData = table.column( 4 ).data().filter(
    function ( value, index ) {
        return value == 'Sara' ? true : false;
    }
);
table.draw();

I also tried this but no luck:

filteredData.draw();

How can I achieve this?

Thank you for your help.

3xCh1_23 · Accepted Answer · 2018-08-02 11:54:38Z

18

Here is a very nice explanation on how to do it: https://datatables.net/reference/option/ajax.data

I am currently using this code:

"ajax": {"url":"/someURL/Backend",
        "data": function ( d ) {
                  return $.extend( {}, d, {
                    "parameterName": $('#fieldIDName').val(),
                    "parameterName2": $('#fieldIDName2').val()
                  } );
        }
}

You call it by doing the following:

$('#myselectid').change(function (e) {
        table.draw();
});

If you want to submit by clicking on the button, change the .change to .click and make sure that ID is pointing to button's id in a HTML

edited Aug 2, 2018 at 11:54

answered Mar 7, 2017 at 14:50

3xCh1_23

1,4992 gold badges20 silver badges40 bronze badges

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

1 Comment

You Old Fool Over a year ago

somehow I've been missing this for quite some time. thanks!

markpsmith · Accepted Answer · 2015-11-24 09:47:03Z

1

You've almost got it. You just need to assign the filter var to the data parameter that's passed in the datatables request:

"ajax": {
     "url": "/getdata",
     "data": {
     "friend_name": $('#myselectid').val();
    }
}

And to filter the data, just call draw() on the select change event

$('#myselectid').change(function (e) {
        table.fnDraw();
});

answered Nov 24, 2015 at 9:47

markpsmith

4,9182 gold badges38 silver badges65 bronze badges

Comments

Timothy C. Quinn · Accepted Answer · 2022-01-06 04:31:16Z

For Basic searches, you should use the search() API:

// Invoke basic search for 'a'
dt.search('a', false)

For more complex queries, you can utilize searchBuilder backend by intercepting the ajax call through an open API. Here are some searchBuilder examples:

// Basic example: 
// . (searchable_fields contains 'a' 
//      AND (office = Tokyo AND Salary > 100000) 
//   )
$('#problem_history').on('preXhr.dt', function(e, settings, data){
    data['searchBuilder'] = {
        'criteria': [
            {'data': 'Office', 'origData': 'office', 'type': 'string'
                ,'condition': '='
                ,'value': ["Tokyo"], 'value1': "Tokyo" 
            }
            ,{'data': 'Salary', 'origData': 'salary', 'type': 'num'
                ,'condition': '>'
                ,'value': [100000], 'value1': 100000 
            }
        ]
        ,'logic': 'AND'
    }
})

// Complex example:
// . (searchable_fields contains 'a'
//      AND (
//            (office = Tokyo AND Salary > 100000) 
//         OR (office = London AND Salary > 200000)
//      )
//   )
$('#problem_history').on('preXhr.dt', function(e, settings, data){
    data['searchBuilder'] = {
        'criteria': [
            {'criteria': [
                    {'data': 'Office', 'origData': 'office', 'type': 'string'
                        ,'condition': '='
                        ,'value': ["Tokyo"], 'value1': "Tokyo"
                    }
                    ,{'data': 'Salary', 'origData': 'salary', 'type': 'num'
                        ,'condition': '>'
                        ,'value': [100000], 'value1': 100000 
                    }
                ]
                ,'logic': 'AND'
            }
            ,{'criteria': [
                    {'data': 'Office', 'origData': 'office', 'type': 'string'
                        ,'condition': '='
                        ,'value': ["London"], 'value1': "London" 
                    }
                    ,{'data': 'Salary', 'origData': 'salary', 'type': 'num'
                        ,'condition': '>'
                        ,'value': [200000], 'value1': 200000 
                    }
                ]
                ,'logic': 'AND'
            }
        ]
        ,'logic': 'OR'
    }
})

SearchBuilder Logic Types:

=
!=
contains
starts
ends
<
<=
>
>=
between
null
!null

SearchBuilder data value blocks:

value: [<val>] seems to always equal value1
value2: For upper bounds of 'between' logic where value1 would be lower bounds

Collectives™ on Stack Overflow

Datatables custom filtering with server side

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related