Move pagination outside of datatables

Question

I'm trying to move the default pagination outside of the table. Datables documentation says there is only one binding for pagination that is .page() for changing the current page. The problem is it doesn't take into account things like the buttons being disabled when page limit is reached, current page, etc... Is there any way for me to just copy the pagination buttons outside the table without writing all the pagination functionality by hand?

<table id="table_id" class="display">
  <thead>
      <tr>
          <th>Column 1</th>
          <th>Column 2</th>
      </tr>
  </thead>
</table>
<div id="custom-pagination">
</div>

<script>
let dt = $('#table_id').DataTable();

$(dt).on( 'draw.dt', function () {
  $(dt).find('.datatTables_paginate').appendTo('#custom-pagination'); 
});

</script>

Answer 1

For me, this is tested and working:

$('#table').DataTable({
    ... other options ... ,
    initComplete: (settings, json)=>{
        $('.dataTables_paginate').appendTo('body');
    },
});

But if you have other datatables in the same page, you wold need to bind the element using the table id like this:

$('#table1').DataTable({
    ... other options ... ,
    initComplete: (settings, json)=>{
        $('#table1_paginate').appendTo('body');
    },
});

And so!