0

I would like to move the Datatables pagination to a custom position. The documentation gives reference to the "dom" option but I dont see that it achieves what I'm looking for.

I want to put the pagination buttons in a card-footer. Is there a relatively clean way to do this via DataTables without writing my own pagination.

<div class="card-footer py-4">
    <nav>
      <ul class="pagination justify-content-end mb-0">
        <li class="page-item disabled">
          <a class="page-link" href="#" tabindex="-1">
            <i class="fas fa-angle-left"></i>
            <span class="sr-only">Previous</span>
          </a>
        </li>
        <li class="page-item active">
          <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
        </li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item">
          <a class="page-link" href="#">
            <i class="fas fa-angle-right"></i>
            <span class="sr-only">Next</span>
          </a>
        </li>
      </ul>
    </nav>
 </div>

In a related example I was able to override the default behaviour of the search box by hiding the Datatables box in CSS and ooking up my custom search box to Datatables using the js below. I'm hoping theres a similar method for the above issue.

var dataTable = $('#example-table').dataTable();
$("#searchbox").keyup(function() {
    dataTable.fnFilter(this.value);
});

Thanks

CatsLoveJazz
  • 829
  • 1
  • 16
  • 35
  • Are you using Bootstrap or some responsive framework? You can customize the dom option with any structure you like. Refer to https://stackoverflow.com/questions/53095022/customization-of-display-format-for-datatables-plugin-in-boostrap-3/53104338#53104338, I have explained there how to customize the dom element to a particular Bootstrap structure. – Shidersz Nov 17 '18 at 02:55
  • "I dont see that it achieves what I'm looking for" Then you're not using it properly. Post what you've tried and it's likely someone can help you. – miken32 Nov 17 '18 at 04:28
  • I want the pagination to appear after the table element has been closed, How might I do this via the dom option? – CatsLoveJazz Nov 17 '18 at 16:50

0 Answers0