Adding more drop down or html elements to Datatabl

Question

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.

Answer 1

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/