Categories
JavaScript Answers

How to remove pagination in jQuery datatable with JavaScript?

Spread the love

To remove pagination in jQuery DataTables using JavaScript, we can set the paging option to false when initializing the DataTable.

For example we write:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Remove Pagination in jQuery DataTable</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
</head>
<body>

  <table id="myTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>30</td>
        <td>USA</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>25</td>
        <td>Canada</td>
      </tr>
      <!-- Add more rows as needed -->
    </tbody>
  </table>

  <script>
    $(document).ready(function() {
      $('#myTable').DataTable({
        paging: false
      });
    });
  </script>

</body>
</html>

In this example, the DataTable is initialized on the <table> element with the ID “myTable”, and the paging option is set to false.

As a result, pagination will be disabled, and all rows will be displayed on a single page.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *