Add button to input text in to a column search

sanjaya83

I have setup column searching with table footers at the top of the columns
I want to add a button that would automatically type 'NEW' into the column 5 search box
having trouble with it
please help

        $(document).ready(function() {  
            // Setup - add a text input to each footer cell
            $('#example tfoot th').each( function () {
                var title = $(this).text();
                $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
            });
            var table =$('#example').DataTable( {
                data: dataSet,
                columns: datahead,
                dom:            "Bfrtip",
                buttons:        [ 'colvis',{extend: 'copy',exportOptions: {columns: ':visible'}},
                                {extend: 'csv',exportOptions: {columns: ':visible'}},
                                {extend: 'excel',exportOptions: {columns: ':visible'}},
                                {extend: 'print',exportOptions: {columns: ':visible'}}],
                select:         true,
                "search": {"regex": true},
                "paging":   false,
                //"ordering": false,
                //"info":     false,
                //"autoWidth": false,
                "order": [[ 7, "desc" ]],
                "createdRow": function ( row, data, index ) {
                    if ( data[8] > 0 && data[9] == "") {
                        $('td', row).addClass('highlight');
                    }
                },
                "columnDefs": [
                    { "width": "1%", "targets": [0,1,2,3,4,6,8,10,12,14,15], },
                    { "width": "15%", "targets": [5] }
                    //,{ "visible": false, "targets": 1 }
                    ]
            } );
            // Apply the search
            table.columns().every( function () {
                var that = this;             
                $( 'input', this.footer() ).on( 'keyup change', function () {
                    if ( that.search() !== this.value ) {
                        that.search(this.value, true, false).draw();
                    }
                });
            });

        });

colin

Can't you use jQuery's val() ? If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. 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

sanjaya83

here is a test case
but this doesn show buttons
http://live.datatables.net/gekarodu/1/edit?html,css,js,console,output

sanjaya83

Pressing the button should add 'System' to column 2 in this test case for searching

kthorngren

First you are getting this error:

Uncaught ReferenceError: dataSet is not defined

I commented out a couple lines now Datatables initializes and the column searches seem to work:
http://live.datatables.net/gekarodu/2/edit

but this doesn show buttons

You have not added the Datatable Buttons CSS and JS files. I added them, now the buttons show.

Pressing the button should add 'System' to column 2 in this test case for searching

Which button are you referring to? All I see is the builtin buttons; Colvis and Export buttons. I added a button that performs a search of System in the 2nd column.

Kevin