JSFiddle - React, Tailwind, and code Playground

by David DeLella

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/2.1.3/css/dataTables.bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/2.1.3/js/dataTables.min.js"></script>
<script src="https://cdn.datatables.net/2.1.3/js/dataTables.bootstrap.min.js"></script>
	<div class="container" style="padding: 2em;">
	  <table id="example" class="table table-striped table-bordered" 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>
	      <tr>
	        <td>Garrett Winters</td>
	        <td>Accountant</td>
	        <td>Tokyo</td>
	        <td>63</td>
	        <td>2011-07-25</td>
	        <td>$170,750</td>
	      </tr>
	      <tr>
	        <td>Ashton Cox</td>
	        <td>Junior Technical Author</td>
	        <td>San Francisco</td>
	        <td>66</td>
	        <td>2009-01-12</td>
	        <td>$86,000</td>
	      </tr>
	      <tr>
	        <td>Cedric Kelly</td>
	        <td>Senior Javascript Developer</td>
	        <td>Edinburgh</td>
	        <td>22</td>
	        <td>2012-03-29</td>
	        <td>$433,060</td>
	      </tr>
	      <tr>
	        <td>Airi Satou</td>
	        <td>Accountant</td>
	        <td>Tokyo</td>
	        <td>33</td>
	        <td>2008-11-28</td>
	        <td>$162,700</td>
	...

CSS

li.dt-paging-button.disabled {
  display: none !important;
}

JavaScript

new DataTable('#example', {
  pageLength: 10,
  language: {
    paginate: {
      next: '<i class="fas fa-chevron-right"></i>',
      previous: '<i class="fas fa-chevron-left"></i>'
    }
  },
  layout: {
    top: null,
    topStart: null,
    topEnd: 'pageLength',
    bottom: {
      paging: {
        type: 'simple_numbers',
        className: 'text-center'
      }
    },
    bottomStart: null,
    bottomEnd: null
  },
  preDrawCallback: function(settings) {
    // Remove the pager is there is only a single page

    let api = new $.fn.dataTable.Api(settings);
    let showPaging = api.page.info().pages > 1;

    let pagination = $(this)
      .closest('.dt-container')
      .find('.dt-paging');

    if (pagination) {
      pagination.toggle(showPaging);
    }
  }
});