title: Add custom dropdown list (datatables plugin) in correct layout
body: <p>How can I add a <code>dropdownlist</code> next to the search field in the <code>datatables</code> plugin? </p>
  
  <p>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. </p>
  
  <p>Like this: <a href="https://i.stack.imgur.com/Fm4zs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Fm4zs.png" alt="enter image description here"></a></p>
  
  <p>How can I do this ?</p>
  
  <pre><code>&lt;script&gt;
      $(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(
                    '&lt;tr class="group"&gt;&lt;td colspan="5"&gt;'+group+'&lt;/td&gt;&lt;/tr&gt;'
                    );
  
                  last = group;
                }
  
              } );
            }
          } );
  
      // Order by the grouping
      $('#example tbody').on( 'click', 'tr.group', function () {
        var currentOrder = table.order()[0];
        if ( currentOrder[0] === 2 &amp;&amp; currentOrder[1] === 'asc' ) {
          table.order( [ 2, 'desc' ] ).draw();
        }
        else {
          table.order( [ 2, 'asc' ] ).draw();
        }
      });
    });
      });
      $('#example23').DataTable( {
          dom: 'Bfrtip',
          buttons: [
              'copy', 'csv', 'excel', 'pdf', 'print'
          ]
      });
  &lt;/script&gt;
  </code></pre>