stateSave and column visibility and individual column search

Restful Web Services

I am using the buttons extension to provide column visibility choices along with individual column search and state save. In one scenario I have an issue.

If I have a column (for example; forename) and I search 'Chris', then I hide this column, then I refresh the page. The search value of Chris is remember and implemented by statesave but my individual column search input in the column forename is empty even though it should say 'chris', because that is the value being searched.

If the column remains visible I have no issue. If the column is hidden by the user and then made visible it is empty.

I think this is because I cannot pass the statesave value to a non visible column using this function?

var state = table.state.loaded();
        if (state) {
          table.columns().eq( 0 ).each( function ( colIdx ) {
            var colSearch = state.columns[colIdx].search;
            if ( colSearch.search) {                      
              $("#filterrow th#"+colIdx+" input").attr("value", colSearch.search);
            }
          });
          table.draw();
 }

My table,

    <table cellpadding="0" cellspacing="0" border="0" class="display" id="cms_module_system_users_staff" width="100%">
        <thead class="hidden">
            <tr>
                <th></th>
                <th>Forename</th>
                <th>Surname</th>
            </tr>  
            <tr id="filterrow">
                <th></th>
                <th id="1" class="select-filter">Forename</th>       
                <th id="2" class="select-filter">Surname</th>        
            </tr>
        </thead>      
        <tbody class="hidden"></tbody>
    </table>

Is there any way to pass the statesave value to a non visible column. Or is there an event that can be triggered when a column is made visible to add in the statesave value?

I cant find a solution so far.

Thanks

Chris

allan

$("#filterrow th#"+colIdx+" input")

This is selecting elements from the document only. However, DataTables will remove hidden elements from the document which is why it is not working as expected.

You probably need to use column().footer() to get the footer cell for a column - see also this example which uses columns().every() to retain a reference to the column in question.

Allan

Restful Web Services

Hi Allan,

Thanks for your help. I actually solved it a different way, using the 'Column visibility event' like this,

        $('#cms_module_system_users_staff').on( 'column-visibility.dt', function ( e, settings, column, state ) {
            var state = table.state.loaded();
            if (state) {
                var colSearch = state.columns[column].search;
                if ( colSearch.search) {                      
                    $("#filterrow th#"+column+" input").attr("value", colSearch.search);
                }
                table.draw();
            }
        }); 

I don't know if this is a good solution, i.e. most efficient, but it seems to work.

Chris