Move Length Menu to Separate Row Alongside a Custom Div

JacksonJack

Hi

I love this plugin, I've managed to do so much with it but I cannot figure out this thing

I want to move the length menu from being on a row with the buttons, to a separate row above it, alongside a span that contains important information about the table.

Here is the basic code to start with:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">

<span>Important Info: XYZ</span>
<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
  </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script>
$(document).ready(function() {
    $('#example').DataTable( {
      dom: 'lBfrtip',
      buttons: [
          'copyHtml5'
      ],
      "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
    } );
} );
</script>

Is this possible?

Thanks
Jack

colin

Hi Jack,

You can do somethings with the DOM, take a look at the example here - it's based on this page. That may help you get the layout you want,

Cheers,

Colin