Indivdual Text Filtering doesnt do anything

Darkenspirit

I was referencing this thread

http://datatables.net/forums/discussion/20879/individual-column-filtering-text-inputs-not-working-with-ajax-data

and subsequently his example website's source code

http://pacesetterexhaust.com/ymm6.html

and as far as I can tell, my initialization is identical -minus the child rows part since I dont know what the child rows are nor do I need them.... and would really not want to add them just to hack up a fix for this.

The boxes come up correctly and show the proper text, Search + 'Column name' but typing into them does not do anything to the table, it doesnt filter it or do anything to the table as far as I can tell.

<script>
$(document).ready(function() {

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

    var table = $('#table_1').dataTable( {
        "ajax": {
        url: "http://localhost:8081/",
        "type": "get",
        "dataSrc": ""
        },
        "columns": [
            { "data": "policyid"},
            { "data": "policytxnid" },
            { "data": "pol submission no" },
            { "data": "txn submission no" },
            { "data": "nfpusertype" },
            { "data": "policystatuscode" },
            { "data": "statecode" },
            { "data": "insurancecompanyname" },
            { "data": "transactiontypecd" },
            { "data": "new renewal?" },
            { "data": "SIC Code" },
            { "data": "SIC Description" },
            { "data": "createddate", "type":"date" },
            { "data": "epcyn" },
            { "data": "dnoyn" },
            { "data": "fidyn" },
            { "data": "crmyn" }
        ],
        "dom": 'TC<"clear">lfrtipS',
        "tableTools": {
            "aButtons": [ "copy", "xls", "print", "pdf" ],
            "sSwfPath": "../MSSQL_api/swf/copy_csv_xls_pdf.swf"
        },
        "scrollY": "480px",
        "scrollX": true,
        "deferRender": true,
        "processing": true,
        "autowidth": true,
        "iDisplayLength": 50
    } );
    
        // Apply the filter
    $("#table_1 tfoot input").on( 'keyup change', function () {
        table
            .column( $(this).parent().index()+':visible' )
            .search( this.value )
            .draw();
    } );
} );
</script>

http://debug.datatables.net/uzukoz

Any ideas?

Rpiechura

Not sure if it matters or not but I don't use that method for searching. When I'm doing the column filter events I use

$("tfoot input").keyup(function (event) { ... });

If you want I can add the logic I use inside the event, but I'm using 1.9.4 syntax so I'm not sure it's what you want.

Darkenspirit

I dont understand what you mean by this. It seems more complicated than this? which is what I am trying to do.

https://datatables.net/release-datatables/examples/api/multi_filter.html

Rpiechura

I meant your Jquery input method, I use a different one. Instead of doing .on('key change') I just use .keyup(). However if you're not having a problem with the event firing than you obviously don't have to worry about the difference. Since you got the code from Allan I'd assume that it will work just fine (and perhaps better than what I'm using), it was just an idea if you weren't getting the event to fire.

I have a multi-column filtering table working, but as I said I'm using the old methods and syntax so you'd have to figure out the difference between the two. That being said, here is the code I use.

 if (event.keyCode == 13) {
            //Get the data for the column filter
            var value = this.value;
            //Get the column index of which column filter I'm typing in
            var index = $(this).closest('th').index();
            //Figure out which table on the page I'm working with (when there is more than 1 table per page)
            var table = $(this).closest('table').dataTable();
            
            //Apply the filter to the column specfied.
            table.fnFilter(value, index);
        }

Darkenspirit

I don tthink its the triggering, I just recreated the example and I really think its an issue with the AJAX request or something. The filtering doesnt seem to think theres data in the columns? something along those lines...

Because if i just make a default HTML table by using <tr> to input the rows, the exact same jquery works fine...

Darkenspirit

So looking at people who try to use AJAX with this feature we get some issues like the drop down not populated if they are using the drop down feature instead of the text feature

https://datatables.net/forums/discussion/16737/individual-column-filtering-meets-ajax-source

All leading back to this from allen

http://legacy.datatables.net/ref#fnInitComplete

How would I incorporate this fninitcomplete to handle the filtering? Does this even make sense?

Darkenspirit

$(document).ready(function() {
    var table = $('#table_1').dataTable( {
        "ajax": {
        url: "http://localhost:8081/",
        "type": "get",
        "dataSrc": ""
        },
        "columns": [
            { "data": "policyid"},
            { "data": "policytxnid" },
            { "data": "pol submission no" },
            { "data": "txn submission no" },
            { "data": "nfpusertype" },
            { "data": "policystatuscode" },
            { "data": "statecode" },
            { "data": "insurancecompanyname" },
            { "data": "transactiontypecd" },
            { "data": "new renewal?" },
            { "data": "SIC Code" },
            { "data": "SIC Description" },
            { "data": "createddate"},
            { "data": "epcyn" },
            { "data": "dnoyn" },
            { "data": "fidyn" },
            { "data": "crmyn" }
        ],
        "dom": 'TC<"clear">lfrtipS',
        "tableTools": {
            "aButtons": [ "copy", "xls", "print", "pdf" ],
            "sSwfPath": "../MSSQL_api/swf/copy_csv_xls_pdf.swf"
        },
        "scrollY": "480px",
        "scrollX": true,
        "deferRender": true,
        "processing": true,
        "autowidth": true,
        "iDisplayLength": 50,
        "bServerSide": false
    } );
    
    $("#table_1 tfoot th").each( function ( i ) {
        var select = $('<select><option value=""></option></select>')
            .appendTo( $(this).empty() )
            .on( 'change', function () {
                table.column( i )
                    .search( $(this).val() )
                    .draw();
            } );
 
        table.column( i ).data().unique().sort().each( function ( d, j ) {
            select.append( '<option value="'+d+'">'+d+'</option>' )
        } );
    } );
    
} );

I am trying this out now and I am receiving an error saying table is undefined But how can it?

var table = $('#table_1').dataTable( {...});

its defined right there inside the ready function! and both these functions are inside! Am I missing something

Rpiechura

One thing I'm seeing that could be causing issues is that you're mixing legacy syntax with new syntax. For example you're saying "bServerSide" which is legacy, instead you should be using "serverSide".

As far as why the table isn't defined, I'm not really sure, it appears to me that it should be defined but if all you want is to get a handle on the table than you can probably use

var table = $(this).closest('table').dataTable();

Darkenspirit

Theres something in the back ground that completely escapes me. If I recreate the sample table on https://datatables.net/release-datatables/examples/api/multi_filter.html

It works fine.

So i then strip down my actual table down to as much as I possibly can to match theirs and it fails.

It is failing on this line.
http://i.imgur.com/97gjoYm.jpg

It says it is not a function when I type something into boxes. It just fails there and I cannot figure out the reason why. Is it simply because it does not support an AJAX source?

Darkenspirit

I found this addon instead. It works correctly and better.

http://jquery-datatables-column-filter.googlecode.com/svn/trunk/index.html

Thanks for reading!