dynamically created datatable will not do column search. please help.

fiks

I dynamically create a datatable from ajax.

On ajax success, I create my_columns json object which I use to initialize the datatable and the table does display proper.

    $.ajax({
        type: "POST",
        url: "../blog_data",
        dataType: 'json',
        cache: false,
        async: false,
        success: function(data){
            var my_columns = get_columns(data);
            var dt_instance = $('#dt_usr_blog').DataTable({
                "select":{
                    style: 'single'
                },
                "data": data,
                "columns": my_columns,
                "dom": '<"top"<"pml"><"pmr"B>>rt<"bottom"lip>',
                "buttons": [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ],
                "initComplete": function(settings, json) {
                },
            });
            // Apply the search on each column
            dt_instance.columns().every( function () {                    
               var that = this;
               $( 'input').on( 'keyup change', function () {
                   that.search(this.value).draw();
                });
            });
    });

I use the code below to insert input boxes on the table header for individual column search. So, in my table I have two headers. One for the headings and below it, the other for search input boxes.

                    $('#dt_usr_blog thead tr').clone(false).appendTo( '#dt_usr_blog thead' );
                    $('#dt_usr_blog thead tr:eq(1) th').each( function (i) {.
                        var title = $(this).text();
                        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
                    });

I have my search code outside datatable initialization code - line 23 to line 28. my search code does bind "key up" and "change" event to the "input" but the search does not work. the behavior is as follows, on "key up" after I type on the input, all rows from the table get removed and a message that says "No matching records found" is displayed. this happens whether there are matching records or not.

here are my thoughts together with what i've tried after so far:

1. I first thought the problem is, I bind the "key up" event to a dom that has not been fully created (my search code is not inside "initiComplete"). This CAN NOT be the problem since the key up event does fire when I type on the input.

2. When I put my search code inside "initComplete", it does not work. I get the error message that 'Uncaught TypeError: Cannot read property 'columns' of undefine' meaning the datatable instance "dt_instannce" is undefined meaning the datatable is not fully initialized and does not exist in dom by the time "initComplete" runs.

3. I thought the problem was with referencing the column as I loop with columns().every(), so I used column index as a argument of the "key up" event handler function (see below). but this did not work either.

           dt_instance.columns().every( function (i) {                    
              var that = dt_instance.column(i);
              $( 'input').on( 'keyup change', function () {
                  that.search(this.value).draw();
               });
           });
   

4. I still think the problem is with referencing the column because the code below worked but its not doing what I want. As it is, the code works but only for column 2. it filters only rows in column 2. but if I change "2" to a variable "i" as in in point 3 above, is does not work.

           dt_instance.columns().every( function () {                    
              var that = dt_instance.column(2);
              $( 'input').on( 'keyup change', function () {
                  that.search(this.value).draw();
               });
           });
   

kthorngren

I tried using your columns().every() event handler and it doesn't work for me. I changed it in this example which seems to work:
http://live.datatables.net/begozeva/1/edit

This is the event handler:

    $( '#example thead'  ).on( 'keyup', ".column_search",function () {
   
        table
            .column( $(this).parent().index() )
            .search( this.value )
            .draw();
    } );

Give it a shot and let us know.

Kevin

fiks

Hi Kev. thanks so much for your input. It solved my problem.

Can anyone explain why columns().every() does not work? What is it that I was doing wrong with columns().every()? My understanding is that columns().every() loops through each column in turn and, as line 25 in my code above shows, "key up" event from the "input" element is bound to 'this' column and the event handler function to handle the event is defined properly.

Alan, do you have anything to say?

colin

Yep, that's exactly what it should do - as in this example. We're happy to take a look if you can link to a test case. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin