Individual column searching (select inputs) - skipping columns

Restful Web Services

I am attempting to integrate the individual column searching (select inputs), http://www.datatables.net/examples/api/multi_filter_select.html, filter into my table. It works using the code below. However, I am trying to make two changes:

1. Skip certain columns, i.e. the first column is an empty column with no date, just an empty checkbox placeholder, so I would like to skip this column and the last columns are; edit & delete (for example), so they should be skipped too.
2. Use the filter in the header in combination with column ordering. I know I can change column.footer() to column.header(). However, whenever you click the pull down the order of the column changes because you are also clicking the whole th item.
3. The final problem is that I use "stateSave": true, but when the page is reloaded the filtering is correct, i.e. the previous filter result is maintained but the option is not shown as 'selected' in the pulldown so it looks like data is missing?

            "initComplete" : function(settings, json) {
                this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
  
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' );
                });
                });
            },

If anyone could help me resolve these issues I would be very greatful!

Thanks

daniel_r

Just saying that all of that and much more is available out of the box in my yadcf plugin for datatables, see some showcase pages / read docs
select2 / state saving example

jLinux

Agreed, i use yadcf and it works perfectly! Very customizable and stable

Restful Web Services

Thanks for the help, I would prefer not to use yadcf at this time.

I have a semi working solution, I have decided against using the select input and instead just a text input.

The only thing I cannot get right at the moment is the retrieving of the state save value in the appropriate text input box. The value is saved because the search is maintained but I cannot get it to stay visible in the text input box.

$('#cms_module_system_users_staff thead tr#filterrow th').each( function () {
        var title = $('#cms_module_system_users_staff thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
        });

 var state = table.state.loaded();
        if ( state ) {
          table.columns().eq( 0 ).each( function ( colIdx ) {
            var colSearch = state.columns[colIdx].search;
            if ( colSearch.search ) {
              $( 'input', table.column( colIdx ).header() ).val( colSearch.search );
            }
          });
          table.draw();
 }

$("#cms_module_system_users_staff thead input").on( 'keyup change', function () {
                table
                .column( $(this).parent().index()+':visible' )
                .search( this.value )
                .draw();
 });

I am using this method, http://jsfiddle.net/s8F9V/27/, where it is my second row in the thead which contains my search fields. I know I am not targeting these correctly, but I cannot get it to work thus far.

Can anyone point me in the right direction?

Thanks

Restful Web Services

Okay I almost have a working solution. I have added individual id's to each th, i.e. <th id="1">, <th id="2">, etc....and this has allowed me to target the correct columns.

The final problem I have just discovered is that column which are initially hidden are not 'searchable' until after I have refreshed the page, which is obviously not ideal. When not using the individual column filter, i.e. the global search, it works. So it should be possible. I guess the problem is with this part of the code?

        $("#cms_module_system_tenancies thead input").on( 'keyup change', function () {
            table
            .column( $(this).parent().index() + ':visible' )
            .search( this.value )
            .draw();
        }); 

Why does this not allow me to search columns which are initially hidden?

Thanks

Restful Web Services

I am 99% certain that the problem is related to statesave and finding the column index. When I refresh the browser so that statesave is enabled, i.e. the visible/hidden column choice is coming from statesave, then if I make a column visible which was previously hidden this alert($(this).parent().index()); returns nothing.

If I refresh the page again then for that same column alert($(this).parent().index()); returns the column index.

How do I get the column index from a previously hidden column whilst using statesave?

allan

alert($(this).parent().index());

That will always give you the visible column index since it is querying the DOM. You can use column.index() to transform between the data index and the visible index.

I would suggest also having a look at this example for a method which avoids that issue altogether.

Allan

Restful Web Services

Hi Allan. Thanks for your help. I don't know if this is a 'good' approach but this seems to work,

$("#cms_module_system_users_staff").on("click", "th", function(event) {
    var colIndex = ($(this).index() + ':visible' );
    $("#cms_module_system_users_staff thead input").bind( 'keyup change', function () {
    table.column( colIndex ).search( this.value ).draw(); 
    }); 
});      

I capture the column index first when the user clicks on the input and then perform the search by capturing the keyup change event.

This is the only method I have found which enables me to capture the column index of a column which has been hidden by the statesave function. It is the use of the statesave function which, for me at least, made it so difficult to try find the visible column indexes.