twan twan - 1 year ago 80
Javascript Question

Add custom dropdown list (datatables plugin) in correct layout

How can I add a

next to the search field in the

Adding one outside where the plugin is initialized and positioning it inside is too dirty. It should be possible to add a custom dropdownlist right? It doesn't have to be dynamic, just a dropdownlist with some values.

Like this: enter image description here

How can I do this ?

"language": {
"sProcessing": "Bezig...",
"sLengthMenu": "_MENU_ resultaten weergeven",
"sZeroRecords": "Geen resultaten gevonden",
"sInfo": "_START_ tot _END_ van _TOTAL_ resultaten",
"sInfoEmpty": "Geen resultaten om weer te geven",
"sInfoFiltered": " (gefilterd uit _MAX_ resultaten)",
"sInfoPostFix": "",
"sSearch": "Werknemers zoeken :",
"searchPlaceholder": "Naam/BSN/Personeelsnr",
"sEmptyTable": "Geen resultaten aanwezig in de tabel",
"sInfoThousands": ".",
"sLoadingRecords": "Een moment geduld aub - bezig met laden...",
"oPaginate": {
"sFirst": "Eerste",
"sLast": "Laatste",
"sNext": "Volgende",
"sPrevious": "Vorige"
$(document).ready(function() {

var table = $('#example').DataTable({
"columnDefs": [
{ "visible": false, "targets": 2 }

"order": [[ 2, 'asc' ]],
"displayLength": 25,
"drawCallback": function ( settings ) {
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;

api.column(2, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
$(rows).eq( i ).before(
'<tr class="group"><td colspan="5">'+group+'</td></tr>'

last = group;

} );
} );

// Order by the grouping
$('#example tbody').on( 'click', '', function () {
var currentOrder = table.order()[0];
if ( currentOrder[0] === 2 && currentOrder[1] === 'asc' ) {
table.order( [ 2, 'desc' ] ).draw();
else {
table.order( [ 2, 'asc' ] ).draw();
$('#example23').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'

Answer Source

Well we can add the custom buttons to DataTable but they come on left side of the table(pretty much far from search box).

I don't know if there is any option available for adding the fields near the search box, But when I got the similar requirement I added(actually appended it to DataTable search box div) it manually with help of bootstrap classes like below

Demo :

Add below code after the DataTable initialization.

 $('<div class="pull-right">' +
        '<select class="form-control">'+
        '<option value="volvo">Volvo</option>'+
        '<option value="saab">Saab</option>'+
        '<option value="opel">Opel</option>'+
        '</select>' + 
        '</div>').appendTo("#example_wrapper .dataTables_filter"); //example is our table id

 $(".dataTables_filter label").addClass("pull-right");