title: Set Custom Position of Datables Length Menu
body: <p>I am using datatables for my project.</p>
  
  <p>I want to set custom position for my filters, pagination and search option.
  I am using <a href="https://mdbootstrap.com" rel="nofollow noreferrer">Material MDB Pro</a> for my CSS.</p>
  
  <p>Now I want to position my length menu below the table as shown in this picture.</p>
  
  <p><a href="https://i.stack.imgur.com/kpxmY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kpxmY.png" alt="I want it like this"></a></p>
  
  <p>So I tried using this code:</p>
  
  <pre><code>$('#example').DataTable( {
          "dom": '&lt;"top"i&gt;rt&lt;"bottom"flp&gt;&lt;"clear"&gt;'
      } );
  </code></pre>
  
  <p>But this brings everything down. Even the search! I want to keep Search and Export buttons on the top and only pagination and length menu to be down.</p>
  
  <p>My Code is :</p>
  
  <pre><code>$(document).ready(function () {
    var table = $('#dtMaterialDesignExample').DataTable({
      "lengthMenu": [[5,10, 25, 50, -1], [5,10, 25, 50, "All"]],
        dom: 'Blfrtip',
        fixedHeader: true,
          buttons: [
              {
                  extend: 'csvHtml5',
                  title: 'bizRTC CDR &lt;?php date('d-m-Y'); ?&gt;',
                   customize: function (csv) {
                       return "Enjoy the file"+csv;
                    },
                     className: 'btn btn-outline-primary waves-effect space',
              },
              {
              extend: 'pdfHtml5',
              title: 'CDR &lt;?php echo date('d-m-Y'); ?&gt;',
              customize: function ( doc ) {
                              doc.content.splice( 0, 0, {
                                  text: "bizRTC CDR"
                              } );
              },
              className: 'btn btn-outline-primary waves-effect space',
              },
              {
                  extend: 'excelHtml5',
  
                  title: 'bizRTC CDR &lt;?php date('d-m-Y'); ?&gt;',
                  message: "Call Records",
                  className: 'btn btn-outline-primary waves-effect space',
  
  
              },
          ],
  
        responsive: {
              details: {
                  display: $.fn.dataTable.Responsive.display.modal( {
                      header: function ( row ) {
                          var data = row.data();
                          return 'Details for '+data[0]+' '+data[1];
                      }
                  } ),
                  renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
                      tableClass: 'table'
                  } )
              }
          },
          "drawCallback": function () {
              $('.dataTables_paginate &gt; .pagination').addClass('pagination pagination-circle pg-blue mb-0');
          }
  });
  </code></pre>
  
  <p><strong>Edit 1:</strong></p>
  
  <p>After adding the following in my code  :</p>
  
  <pre><code>dom: '&lt;"row"&lt;"float-left"B&gt;&lt;"float-right"f&gt;&gt;&lt;"row"&lt;"float-left"i&gt;&lt;"float-right"p&gt;&gt;rtlp',
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/vfxry.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vfxry.png" alt="Edited Code"></a></p>