DataTable 1.10x jQuery Column Filter trough a input textbox Server Side

Fatihpk

I am having trouble with the DataTable 1.10 Column Filtering trough a input element.

jQuery(document).ready(function() {    

    dt_table = $('#datatable_list').DataTable( {
        "dom": "<'top'i>rt<'table-scrollable't>lp",
        "processing": true,
        "serverSide": true,
        "ajax": "ajax/list_json.php",
        "pageLength": 10,
        "autoWidth": false
    }); 

    $('#quickfind').on( 'keyup', function () { dt_table.search( this.value ).draw(); } );

});

As you can see i am using the Server Side processing with a json output. The total list is filling good.

In the table there is a footer with 4 inputs:

<tfoot>
<tr>
<th><input type="text" id="filters_0" name="filters_0" class="form-control form-filter"></th>
<th><input type="text" id="filters_1" name="filters_1" class="form-control form-filter"></th>
<th><input type="text" id="filters_2" name="filters_2" class="form-control form-filter"></th>
<th><input type="text" id="filters_3" name="filters_3" class="form-control form-filter"></th>
</tr>
</tfoot>

I am using the standard ssp.class.php class. Please i am working like for 4 days with this simple column filtering project.

What i want is simple. The quickfind textbox is working great for searching the whole table. But i want to filter also for each column. Like 'filters_0' is the ID of the product. But this will not work.

PLEASE UNDERSTAND THAT I AM USING THE LATEST DataTabes 1.10.

daniel_r

Although my yadcf plugin is using datatables api under the hood (which means that on your server side the string will be present in columns[0][search][value] / columns[1][search][value] / etc... you can still check how it will work for you

http://yadcf-showcase.appspot.com/server_side_source.html

Fatihpk

Daniel, thanks for the response. I will try your plugin.

But i am using the ssp.class.php, do you have a example of how to read the filters in php.

Right now the filter works but no result will be displayed.

daniel_r

Not a php user myself and no idea about the ssp.class.php, BUT, my yadcf plugin is using the datatables api under the hood so the data that is being sent to the server from the client will stay as it was, I recommend you to use the filter_type: "text" in the beginning, if it works fine for you then you will have read the docs and browse the showcase to see how you can use other filter type that involve sending data from server to client to populate the filters (like select or others), anyway look for filters in the columns[0][search][value] / columns[1][search][value] / etc... (just like you had to do without my plugin)

tangerine

Why don't you use this?
http://datatables.net/examples/api/multi_filter.html

Fatihpk

How about the filter_container_id, this not working right now. When i declare a input:

<input type="text" id="filters_0" name="filters_0" class="form-control form-filter">

And in the init JS:

        {   
            column_number : 0, 
            filter_container_id: "filters_0"
        },

This will not work. Got any idea what is going wrong?

Fatihpk

Trangerine, i have try that method, But i was working like 4 days for this @^^@# column filter in the ajax / server-side. But with no succes.

I am using the 1.10x and ssp.class.php, very strange it has to be this difficult just to add a column filter.

daniel_r

filter_container_id must point to id of a container (like div or span) for the yadcf filter to fit into...

try

<div id="filters_0"></div>

Fatihpk

Hi Daniel, dont you have like a library of your yadcf?

daniel_r

library? I have a github repository for it https://github.com/vedmack/yadcf and a showcase http://yadcf-showcase.appspot.com/

Fatihpk

I have a select box in the filter that must be filterd with a string, value is not important. How can i arrange this?

daniel_r

rephrase your question please, do you want your table to be pre filtered? I mean on page load (automatically?)

Fatihpk

Not at all :) I just want a select box that it filled with some strings. Value is not important for me in the select box. Get it now?

daniel_r

go over the server side example in the showcase http://yadcf-showcase.appspot.com/server_side_source.html

and inspect the code sample, basically you need to pass an array / list inside a yadcf_data_0 / yadcf_data_1 / etc (depend on in which column you are placing the filter) and this list will populate the select filter with values

Fatihpk

Ok thanx, i will try. ONE LAST QUESTION :)

Is there a way to add a search button inside the table and not auto filter?

daniel_r

what do you mean by search button? yadcf got 9 different types of filters that can be used

select input

multiple selection input

text input

autocomplete input - make use of the jQuery UI Autocomplete widget (with some enhancements)

date input - make use of the jQuery UI Datepicker widget (with some enhancements)

range of numbers

range of numbers with slider widget - make use of the jQuery UI Slider widget (with some enhancements)

range of dates - make use of the jQuery UI Datepicker widget (with some enhancements)

custom function

Fatihpk

Just like i said before, i dont need the auto filter. I just want to filter the results after triggering a SEARCH button.

daniel_r

ok, then add a simple button and call yadcf.exFilterColumn function (read about its usage in the docs / see showcase samples b.t.w if you are using ajax/server side source and you want to call that function after the table was loaded already, then you should dd a third argument true (boolean) , like this yadcf.exFilterColumn(oTable, [[],[]...], true);

That's it.