Is it possible to add more drop down or other html elements to the Datatable after the default
Display "5" record
I want to add more drop down to my DataTable between the Default one and the Search Bar which is provided by default.
I have gone through sDom but I am not able to understand the syntax.
Thanks in advance.
You can insert an element <div> between the length menu and the filter box this way :
var table = $('#example').DataTable({
dom : 'l<"#add">frtip'
})
'lfrtip' is the default dom string, so you basically just add an <div id="#add"> to the existing layout. It is adviceable to style #add, especially setting the display type to inline-block so it not break the elements down under :
#add {
display: inline-block;
padding-left: 30px;
float: left;
}
Now you can add <select>'s (or whatever) to the #add element the plain jQuery way :
//insert a label
$('<label/>').text('my dropdown').appendTo('#add')
//insert the select and some options
$select = $('<select/>').appendTo('#add')
$('<option/>').val('1').text('option #1').appendTo($select);
$('<option/>').val('2').text('option #2').appendTo($select);
$('<option/>').val('3').text('option #3').appendTo($select);
demo -> http://jsfiddle.net/ahqbf35w/
<input> with an ID here -> jsfiddle.net/ahqbf35w/22