adding search inputs with a javascript data source

iface

We create our dataTable controls from javascript source data. Typically on an empty <TABLE> tag. We'd like to be able to add column searching (at the top) by adding the search row directly into the table.

The problem is that datatables removes the contents of the <TABLE> tag.

Can anyone tell me how can I accomplish this?

HTML:

<table id="example" class="display" cellspacing="0" width="100%">
     <thead>
         <tr>
                <th><input type="text" value="" /></th>
                <th></th>
                <th><input type="text" value="" /></th>
         </tr>
     </thead>
</table>

JAVASCRIPT:

$('#example').DataTable({
                destroy: true,
                paging: false,
                scrollY: 200,
                searching: false,
                info: false,
                order: [[0, "desc"]],
                data: [JAVASCRIPT SOURCE DATA HERE],
                columns: [
                    {title: "Date and Time", data: 'journalEntryDte', width: '20%'},
                    {title: "Username", data: 'username', width: '40%'},
                    {title: "Comments", data: 'entry', width: '40%'}
                ]
            });

allan

The problem is that datatables removes the contents of the <TABLE> tag.

I don't understand I'm afraid - can you link to a test case showing the issue. DataTables should not empty the table. It will overwrite the contents of your header cells since you pass in a columns.title option, but it should not empty the table.

Allan