How can I add a dropdownlist next to the search field in the datatables plugin?

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:

How can I do this ?

<script>
    $(document).ready(function(){
      $('#myTable').DataTable({
        "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', 'tr.group', 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'
        ]
    });
</script>

How can I add a dropdownlist next to the search field in the datatables plugin?

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:

How can I do this ?

<script>
    $(document).ready(function(){
      $('#myTable').DataTable({
        "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', 'tr.group', 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'
        ]
    });
</script>

• javascript
• jquery
• datatables

• More help full tutorial: How to Add Custom Dropdown in DataTable – Fefar Ravi Commented Mar 23, 2023 at 12:14

3 Answers 3

Well we can add the custom buttons to DataTable but they e 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 : https://jsfiddle/Prakash_Thete/uo110be1/4/

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");

You can use the datatables collection.

$('#myTable').DataTable( {
    buttons: [
        {
            extend: 'collection',
            text: 'Flag',
            buttons: [
                { text: 'High priority',   action: function () {  } },
                { text: 'Medium priority', action: function () {  } },
                { text: 'Low priority',    action: function () {  } }
            ],
            fade: true
        }
    ]
} );

Please note - this property requires the Buttons extension for DataTables.

<script type="text/javascript" src="https://cdn.datatables/buttons/1.5.1/js/dataTables.buttons.min.js"></script>

Another option is to use the DOM property of the table initializer. e.g.

    "dom": "<'row'<'col-sm-4'f><'col-sm-2 customDropDown'><'col-sm-2'r><'col-sm-4'l>>" +
        "<'row'<'col-sm-12't>>" +
        "<'row'<'col-sm-6'i><'col-sm-6'p>>",

See https://datatables/reference/option/dom for the meaning of the different letters (flrti...)

You can add a custom class (customDropDown) and then use it to append the dropdownbox.

$('<div>' +
    '<select class="form-control">' +
    '<option value="Processing">Processing</option>' +
    '<option value="Error">Error</option>' +
    '<option value="Completed">Completed</option>' +
    '</select>' +
    '</div>').appendTo("#DocumentsTable_wrapper .customDropDown");