filter column into server-side process

denny3d · July 2014

Hi,
mine is a question that has been answered already.
how do I set up filters to search for column in a table with a process server side?
It should use the plugin columnfilter? or what?
Does anyone have an example? or can direct me on how to do?
This is may code js:

$('#finder').dataTable({
processing: true,
serverSide: true,
ajax: {
url: "xhr_finder_datatables",
type: "POST"
}
});

and this html

>

> > > > > > >

#id	Buildup

>

thanks a lot

allan · July 2014

Hi,

Have you tried the approach from this example: http://datatables.net/examples/api/multi_filter.html ? Assuming your server-side processing script supports column filtering, then that approach should work.

Allan

denny3d · July 2014

Thanks Allan
I already tried it and it does not work.
for remote access use DataTables ignited.
I dont know if its support column filtering
how do I know?

Denis

denny3d · July 2014

table is correcty populated, but only filtering not works.
this my JS code:

// Setup - add a text input to each footer cell
$('#finder tfoot th').each( function () {
var title = $('#finder thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="'+title+'" />' );
} );

    // DataTable
    var table = $('#finder').dataTable({
        processing: true,
        serverSide: true,

        ajax: {
            url: "../jecom_api/xhr_finder_datatables",
            type: "POST"
            }
        }
    });

    // Apply the search
    table.columns().eq( 0 ).each( function ( colIdx ) {
        $( 'input', table.column( colIdx ).footer() ).on('keyup change', function () {
            table
                .column( colIdx )
                .search( this.value )
                .draw();
        } );

} );

daniel_r · July 2014

You can also try my yadcf plugin for that, take a look at the server side filtering showcase page

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

Note that yadcf support server side filtering with datatables 1.10 only

denny3d · July 2014

i prefer use column filter
I have this error:
Uncaught TypeError: undefined is not a function
.column

denny3d · July 2014

sorry
Uncaught TypeError: undefined is not a function
.columns

daniel_r · July 2014

I think you should use the new datatables API (1.10), use

var table = $('#finder').DataTable({....

With capital "D" (I think that .columns belongs to the new API

denny3d · July 2014

Thank daniel_r
now datatable work fine as populate data, but general search workfine, while, single column filter not work, have you any idea?
I post my code


        $('#finder tfoot th').each(function() {
            var title = $('#finder thead th').eq($(this).index()).text();
            $(this).html('<input type="text" class="form-control" placeholder="' + title + '" />');
        });

        
        var table = $('#finder').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "../jecom_api/xhr_finder_datatables",
                type: "POST"
            }
        });

        
        table.columns().eq(0).each(function(colIdx) {
            $('input', table.column(colIdx).footer()).on('keyup change', function() {
                console.log(colIdx + '-' + this.value);
                table
                        .column(colIdx)
                        .search(this.value)
                        .draw();
            });
        });

daniel_r · July 2014

Nope sorry, I filter with my own yadcf ;)

denny3d · July 2014

ok, now i try yadcf ;)

daniel_r · July 2014

if you trying yadcf with the new datatbles API, make sure you are using the new yadcf init function like in this showcase page
http://yadcf-showcase.appspot.com/DOM_Ajax_Multiple_1.10.html

scroll down to "Usage(on this page example):"

denny3d · July 2014

Hi Daniel
have an error: undefined is not a function

thus my code:

// DataTable
        $('#finder').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "../jecom_api/xhr_finder_datatables",
                type: "POST"
            },
            oLanguage: {
                sEmptyTable: datatable_sEmptyTable,
                sInfo: datatable_sInfo,
                sInfoEmpty: datatable_sInfoEmpty,
                sInfoFiltered: datatable_sInfoFiltered,
                sInfoPostFix: datatable_sInfoPostFix,
                sInfoThousands: datatable_sInfoThousands,
                sLengthMenu: "_MENU_",
                sLoadingRecords: datatable_sLoadingRecords,
                sProcessing: "<i class=\"icon-spin3 animate-spin\"></i>&nbsp;" + datatable_sProcessing,
                sSearch: "",
                sZeroRecords: datatable_sZeroRecords,
                oPaginate: {
                    sFirst: datatable_sFirst,
                    sPrevious: datatable_sPrevious,
                    sNext: datatable_sNext,
                    sLast: datatable_sLast
                },
                oAria: {
                    sSortAscending: datatable_sSortAscending,
                    sSortDescending: datatable_sSortDescending
                }
            }
        }).yadcf([
            {column_number: 0},
            {column_number: 1, filter_type: "range_number_slider", filter_container_id: "external_filter_container"},
            {column_number: 2, data: ["Yes", "No"], filter_default_label: "Select Yes/No"},
            {column_number: 3, filter_type: "auto_complete", text_data_delimiter: ","},
            {column_number: 4, column_data_type: "html", html_data_type: "text", filter_default_label: "Select tag"}
        ]);

where i wrong?

daniel_r · July 2014

See my comment above :)

if you trying yadcf with the new datatbles API, make sure you are using the new yadcf init function like in this showcase page http://yadcf-showcase.appspot.com/DOM_Ajax_Multiple_1.10.html
scroll down to "Usage(on this page example):"

And note that if you want to use range_number_slider / auto_complete you need to include them in your html (you can do view source of my showcase and grab the js/css from there), I guess that you better start with a minimal setup , like

yadcf.init(table, [{
        column_number: 0
    }]);

denny3d · July 2014

the same error: undefined is not a function

// DataTable
        var oTable = $('#finder').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "../jecom_api/xhr_finder_datatables",
                type: "POST"
            },
            oLanguage: {
                sEmptyTable: datatable_sEmptyTable,
                sInfo: datatable_sInfo,
                sInfoEmpty: datatable_sInfoEmpty,
                sInfoFiltered: datatable_sInfoFiltered,
                sInfoPostFix: datatable_sInfoPostFix,
                sInfoThousands: datatable_sInfoThousands,
                sLengthMenu: "_MENU_",
                sLoadingRecords: datatable_sLoadingRecords,
                sProcessing: "<i class=\"icon-spin3 animate-spin\"></i>&nbsp;" + datatable_sProcessing,
                sSearch: "",
                sZeroRecords: datatable_sZeroRecords,
                oPaginate: {
                    sFirst: datatable_sFirst,
                    sPrevious: datatable_sPrevious,
                    sNext: datatable_sNext,
                    sLast: datatable_sLast
                },
                oAria: {
                    sSortAscending: datatable_sSortAscending,
                    sSortDescending: datatable_sSortDescending
                }
            }
        });
        
        yadcf.init(oTable, [{
                column_number: 0
            }, {
                column_number: 1,
                filter_type: "range_number_slider"
            }]);

any comment?

denny3d · July 2014

my html is:
```<table class="table" id="finder">

        <thead>

            <tr>
                <th>#id</th>
                <th>Buildup</th>
            </tr> 

        </thead>


    </table>

```

daniel_r · July 2014

My bad again I guess, have you downloaded the latest version of yadcf (0.8.2.beta) ?

I guess that no, so grab it from here

https://raw.githubusercontent.com/vedmack/yadcf/master/lab/jquery.dataTables.yadcf.js

Let me know id it works for you and make sure you got the jquery slider css/js because of your "range_number_slider" usage

Last tip

add filter_delay: 500 to your slider filter for a smooth filtering and save the abuse of your server :)

yadcf.init(oTable, [{
                column_number: 0
            }, {
                column_number: 1,
                filter_delay: 500,
                filter_type: "range_number_slider"
            }]);

denny3d · July 2014

ok, but dont work,
I think the problem is the class I use to query the database.
Because, now i not have problem with js.
but dont filter if i try to select a value from a select

daniel_r · July 2014

You know that since you are using

serverSide: true

all your filtering logic is being done on your server side? You have to get the filtered value in your POST method of xhr_finder_datatables and do the filtering and return only the relevant rows... that's how it works when serverSide: true, you can get idea from my java implementation : http://yadcf-showcase.appspot.com/server_side_source.html , scroll to Usage - Server(on this page example): section

denny3d · July 2014

i try, but where i insert code for server side?

daniel_r · July 2014

I might be wrong, but I think you not really want to use "serverSide: true" https://datatables.net/examples/data_sources/server_side.html , but instead you want to use Ajax sourced data https://datatables.net/examples/data_sources/ajax.html

In that case remove the the "serverSide: true" and let yadcf do the magic :)

allan · July 2014

DataTables ignited

We don't know if that supports column based filtering in server-side processing mode. You would need to look at the source code for that library to determine if that is the case or not.

Allan

denny3d · July 2014

i think yes, because, standard search (not for column) work fine.
But i not found anything all :-(

allan · July 2014

I'm not sure why the global search would indicate that column searching is enabled in the code. You'd need to read the code and see if it supports the DataTables server-side processing requirements. Or you could ask the author of the library.

Allan

ashiers · July 2014

Since I see you're on the java platform, you may want to check out the JED library of classes that support DataTables. For server side implementation check out http://jed-datatables.ca/jed/examples/basicssp.jsp For multiple column filtering while performing server side processing check out http://jed-datatables.ca/jed/examples/multi_filter.jsp

filter column into server-side process

filter column into server-side process

Answers

} );

Howdy, Stranger!

Categories

DataTables

filter column into server-side process

filter column into server-side process

Answers

} );

Howdy, Stranger!

Quick Links

Categories

DataTables