Sort one column w/ value

bigzee

The issue i'm having is that I have a table with about 8 columns, and I want to add default filtering on the table, where it only shows rows that have value equal to what I've specified.

So, for example if I had the following table:

A | B | C | D
1 | test | x | y
2 | fn | y | y
3 | rnd | x | x
4 | test | y | x

I want to add a default filter that only rows where column "B" is equal to "test" appears, but allow them to remove that filter/set their own one. Essentially, allow filtering on a per column basis, and be able to specify a default filter. Sorry if I didn't explain that well, if you guys need any clarifications, please ask!

Is this at all possible?

Thanks!

EDIT:

To add another test case to describe what I mean, the example data table provided here:
http://live.datatables.net/
I want to be able to allow users to specify one column, and then filter by a value only in that column. i.e. they would be able to select "Position" and type in the filter of "Financial Controller" and they would only see the rows where "Position" is set to "Financial Controller", and I want to be able to set a default value to that sorting.

bigzee

Got it working with the following code:

        $('.mainTable tfoot th:lt(7)').each( function () {
            var title = $('.mainTable thead th').eq( $(this).index() ).text();
            $(this).html( '<input style="width:100%;" type="text" placeholder="Search '+title+'" />' );
        } );

        // DataTable
        var table = $('.mainTable').DataTable({
            "pagingType": "full_numbers",
            "iDisplayLength": 5,
            "aoColumnDefs": [{
                "bSortable": false,
                "aTargets": [ 7 ]
            }],
            "order": [[ 0, "desc" ]],
            "oLanguage": {
                "sLengthMenu": 'Display <select>' +
                '<option value="5">5</option>' +
                '<option value="10">10</option>' +
                '<option value="20">20</option>' +
                '<option value="30">30</option>' +
                '<option value="40">40</option>' +
                '<option value="50">50</option>' +
                '<option value="-1">All</option>' +
                '</select> records'
            }
        });

        // Apply the search
        table.columns( ':lt(7)' ).every( function () {
            var that = this;
            $( 'input', this.footer() ).on( 'keyup change', function () {
                that
                .search( this.value )
                .draw();
            } );
        } );

Thanks!