Pagination at top and bottom with DataTables

Question

I'm using SB Admin 2 theme, with DataTables jQuery plugin. Is it possible to have pagination positioned at the top and at the bottom of a table, at the same time? If it is, how could I achieve it? This is what I currently have as a working code:

<script>

$('#data-table').DataTable({
  responsive: true,
  "pageLength": 25,
  "columnDefs": [ {
  "targets"  : 'no-sort',
  "orderable": false,
  }],
  "language": {
          "lengthMenu": "Show _MENU_ items per page",
          "zeroRecords": "Nothing found. Please change your search term",
          "info": "Page _PAGE_ of _PAGES_",
          "infoEmpty": "No results",
          "infoFiltered": "(filtered out of _MAX_)",
    "search":       "Search:",
    "paginate": {
      "first":      "First",
      "last":       "Last",
      "next":       ">>",
      "previous":   "<<"
    }
  }
});

</script>

I have tried using what the official site suggests (removing the code I posted, and then doing a simple copy/paste, and changing the id), but it did absolutely nothing. I'm guessing that I'm doing something wrong, but I have no idea what.

Answer 1

Bootrsap-based styling such as with SB Admin 2 theme requires specially crafted value for dom option. Default value for dom with Bootstrap is shown below:

dom: "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
     "<'row'<'col-sm-12'tr>>" +
     "<'row'<'col-sm-5'i><'col-sm-7'p>>",

Pagination control is represented by letter p in the dom value.

You can put pagination at the top by using the code below. You can adjust column sizes or remove certain controls by adjusting the value for dom option.

var table = $('#example').DataTable({
    dom: "<'row'<'col-sm-3'l><'col-sm-3'f><'col-sm-6'p>>" +
         "<'row'<'col-sm-12'tr>>" +
         "<'row'<'col-sm-5'i><'col-sm-7'p>>",
});

See this jsFiddle for code and demonstration.