Adding button and Text Boxes to the Toolbar

williamflock

Hi,

I'm using version 1.10.9 of Jquery datatables. I have tried example after example, but my button will not appear in my toolbar, it remains where I put the div on the page. (this puts it below or above the table)
HTML: '<div id="toolbar"></div>'
JS: $("#toolbar").html("<button>Test</button>");
sDom: '<"H"irpf<"#toolbar">>t<"F"p>'

I understand that the new button can accomplish this, but I want to add two textboxes also.

I have been using a workaround, where I add a second row to the HTML of the table head, but I want it in the toolbar.
<table id="tblCourses" class="table table-striped table-bordered" cellspacing="0">
<thead>
<tr>
<td colspan="8" align="center">City, State &nbsp;<input id="City" class="typeahead" type='text' size="40" placeholder="City and State separated by comma" autocomplete="off" />&nbsp;&nbsp; Zip <input id="ZipCode" placeholder="Zipcode" type='text' size="10" />&nbsp;&nbsp; <button id="btnSetLocation" type="button" class="btn btn-primary">Set Location</button></td>
</tr>
<tr>
<th>Select</th>
<th>Course</th>
<th>Holes</th>
<th>Tee Type</th>
<th>Target Type</th>
<th>City</th>
<th>State</th>
<th>Miles Away</th>
</tr>
</thead>
<tbody></tbody>
</table>

Can anyone point me in the right direction to get these controls inside the toolbar.

Thank you
Bill

williamflock

I was able to add two textboxes (inputs) and a button to the Jquery datatables header.

I used the datatables fnDrawCallback method to prepend the div tag (.toolbar) I hard coded to the page.

Inside the fnDrawCallback I included $('.dataTables_wrapper').prepend($('.toolbar'));

I tried the method where I used the sDom, but it wasn't working.

Also, I had to hard code the div tag onto the page, if I created the div tag dynamically, Jquery could not bind and I could not use Jquery to select the input text types.

I added the toolbar and now I am able to use the Bootstrap typeahead to fetch City,State values after a few keystrokes. After the textbox is populated I can then click the button to perform oTable.fnFilter(value); and send the values to the server. I also had to add

fnServerParams: function (aoData) { aoData.push({ "name": "sReturnCityState", "value": $("#City").val() }); aoData.push({ "name": "sReturnZipCode", "value": $("#ZipCode").val() }); },

to the datatables JS to send the new values back to the server.