Individual column filtering (text inputs) not working with ajax data

jagsweb

Hello,

I am new to datatables so I will try to make this as clear as possible. I have several issues that I am dealing with but I will address them in posts one or two at a time to keep it clear

I have two webpages set up, one works(example) and one doesnt(my data).

One using the examples for Individual column filtering (text inputs) using tables from the html and this feature is working on this page. http://pacesetterexhaust.com/sample6.html On this page typing the text starts the search and the input box says "search (column title)" as it is supposed to.

I created another page using the exact same settings except this time I am pulling in the table information via text file. The text inputs do not have the "search (column title) in them and the search does not work. http://pacesetterexhaust.com/ymm6.html

This is the code for the page that doesnt work. The data file is very large so I cannot realistically store this data on the page in html

Any help and assistance is greatly appreciated!

jagsweb

Here is the code for the one that doesnt work.

$(document).ready(function() {
         // Setup - add a text input to each footer cell
    $('#locator thead th').each( function () {
        var title = $('#example thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
    
    $('#locator').dataTable( {
        "ajax": {
            "url": "data/fitmentb.txt",
            "dataSrc": ""
        },
        "columns": [
            { "data": "LongDesc" },
            { "data": "Year" },
            { "data": "Make" },
            { "data": "Model" },
            { "data": "Engine" },
            { "data": "PartNumber" }
        ],
        "bSort": false,
        "bPaginate": true,
            "bLengthChange": true,
        "bInfo": false,
            "bAutoWidth": true,
        "bStateSave": true,
        "iCookieDuration": 60*60*24, // 1 day
    });
 
   // Apply the filter
    $("#locator thead input").on( 'keyup change', function () {
        table
            .column( $(this).parent().index()+':visible' )
            .search( this.value )
            .draw();
    } );
} );

allan

There is a Javascript error on the page if you just look int the console:

Uncaught ReferenceError: table is not defined

And right enough, it isn't :-) var table = $('#locator').dataTable( { will fit it.

Allan

jagsweb

Allan,

Thanks for the response. I really like Data Tables. It is very versatile and I see it being a huge help with the amounts of data that we have to deal with.

I applied the change you mentioned above to http://pacesetterexhaust.com/ymm6.html
and it still doesn't work?

I am not sure what I am doing wrong. The issue is still the same. The live column search function does not work and the default text in each of those search boxes does not show what it is supposed to.

Any help is appreciated

Joe

tangerine

Cancelled - my mistake.

jagsweb

I fixed it. the funny part is Im not quite sure how.

I decided to add child rows and when I did, both of my issues above resolved themselves. i still have a couple of other things that I want to get worked out but I will save that for another post.