filter column into server-side process

filter column into server-side process

denny3ddenny3d Posts: 13Questions: 1Answers: 0

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

>

> > > > > > >
#idBuildup

>

thanks a lot

Answers

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    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

  • denny3ddenny3d Posts: 13Questions: 1Answers: 0

    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

  • denny3ddenny3d Posts: 13Questions: 1Answers: 0

    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_rdaniel_r Posts: 460Questions: 4Answers: 67
    edited 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

  • denny3ddenny3d Posts: 13Questions: 1Answers: 0

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

  • denny3ddenny3d Posts: 13Questions: 1Answers: 0

    sorry
    Uncaught TypeError: undefined is not a function
    .columns

  • daniel_rdaniel_r Posts: 460Questions: 4Answers: 67

    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

  • denny3ddenny3d Posts: 13Questions: 1Answers: 0
    edited 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_rdaniel_r Posts: 460Questions: 4Answers: 67

    Nope sorry, I filter with my own yadcf ;)

  • denny3ddenny3d Posts: 13Questions: 1Answers: 0

    ok, now i try yadcf ;)

  • daniel_rdaniel_r Posts: 460Questions: 4Answers: 67

    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):"

  • denny3ddenny3d Posts: 13Questions: 1Answers: 0

    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_rdaniel_r Posts: 460Questions: 4Answers: 67
    edited 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
        }]);
    
  • denny3ddenny3d Posts: 13Questions: 1Answers: 0
    edited 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?

  • denny3ddenny3d Posts: 13Questions: 1Answers: 0

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

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

    ```

  • daniel_rdaniel_r Posts: 460Questions: 4Answers: 67

    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"
                }]);
    
  • denny3ddenny3d Posts: 13Questions: 1Answers: 0

    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_rdaniel_r Posts: 460Questions: 4Answers: 67

    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

  • denny3ddenny3d Posts: 13Questions: 1Answers: 0

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

  • daniel_rdaniel_r Posts: 460Questions: 4Answers: 67

    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 :)

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    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

  • denny3ddenny3d Posts: 13Questions: 1Answers: 0

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

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    edited 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

  • ashiersashiers Posts: 101Questions: 8Answers: 7
    edited 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

This discussion has been closed.