CODEWITHSUNDEEP
jquerydatatablesdatatables-1.10
aron.duby
aron.duby

Reputation: 2292

Datatables - Row always visibile or Don't Hide Row or Don't Search Row or Pin Row

With DataTables what I'd like to do is have a check box in a column and if that box is checked then that row will always be visible. Search is the biggest concern, if I pin something and search for something else the pinned row should still stay while everything else is filtered. Pagination isn't a concern because I'm not paginating.

Any ideas on how to pull this off?

Upvotes: 1

Views: 524

Answers (1)

davidkonrad
davidkonrad

Reputation: 85598

You can do this by overriding the built-in search triggered by the search box. Simply unbind() events from the searchbox, then perform your own search by a custom filter that besides normal string comparison returns true if a rows corresponding checkbox is checked.

The below example has checkboxes in the first column : 

$('.dataTables_filter input').unbind().bind('keyup', function() {
    var searchTerm = this.value.toLowerCase();
    $.fn.dataTable.ext.search.push( function( settings, data, dataIndex ) {
        //return true if checkbox is checked
        if (table.cells({ row:dataIndex, column:0 }).nodes().to$().find('input').is(':checked')) return true;
        //search normally by comparing content in each column with searchTerm
        for (var i=0;i<data.length;i++) {
            if (~data[i].toLowerCase().indexOf(searchTerm)) return true;
        }
        return false;
    })
    table.draw();
    $.fn.dataTable.ext.search.pop();
})

demo -> http://jsfiddle.net/sudpevLf/

DataTables' built-in filtering is "smart" in that it breaks the user's input into individual words and then matches those words in any position and in any order in the table (rather than simple doing a simple string compare).

could be reproduced as

$('.dataTables_filter input').unbind().bind('keyup', function() {
    var searchTerms = this.value.toLowerCase().split(' ');
    $.fn.dataTable.ext.search.push( function( settings, data, dataIndex ) {
        //return true if checkbox is checked
        if (table.cells({ row:dataIndex, column:0 }).nodes().to$().find('input').is(':checked')) return true;
        //search normally by comparing content in each row with searchTerm
        for (var s=0;s<searchTerms.length;s++) {
            for (var i=0;i<data.length;i++) {
                if (~data[i].toLowerCase().indexOf(searchTerms[s])) return true;
            }
        }    
        return false;
    })
    table.draw();
    $.fn.dataTable.ext.search.pop();
})

try search for "cedric san" - returning both names with Cedric and all San Franciscos. http://jsfiddle.net/sudpevLf/1/

Upvotes: 1

Related Questions