Using data table pagination-CSS Tutorial-php.cn

Using data table pagination

WBOY

Release： 2023-08-27 16:21:06

forward

1240 people have browsed it

Using data table pagination

We can use paging technology to display large amounts of data in smaller chunks. For example, online stores like Amazon and Flipkart list millions of products. So if they don't use pagination technology to display the data, the user would need to scroll to the end of the web page to see the last product. Now, think about how much scrolling it takes to get to the last product among millions of products.

In pagination technology, we display a specific amount of data on a single page. For example, if we set the length of each page to 100, the user can see the first 100 products on the first page, another 100 products on the second page, and so on.

In jQuery, the Datatables plug-in is used to format HTML table data. Additionally, it allows adding pagination functionality to tables.

The Chinese translation of

Syntax

is:

Grammar

Users can use the Datatables API to add pagination to the table according to the following syntax.

$('selector').DataTable({
   "paging": boolean,
   "pageLength": number
});

Copy after login

In the above syntax, users can use "true" or "false" Boolean values to show or hide pagination. The pageLength property specifies the total number of entries displayed on a single page.

The Chinese translation of

Example 1

is:

Example 1

In the example below, we create a table of card data. Additionally, we added an 'id' with the value 'car'.

In jQuery, we access the table using its id and execute the DataTable() function. Additionally, we pass this object as an argument to the datatable() method. This object contains "paging: true" and "pageLength: 3" to set paging, showing 3 items per page.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
   <link rel = "stylesheet" href = "https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
   <script src = "https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"> </script>
   <style>
      .car-table {
         width: 500px;
      }
   </style>
</head>
<body>
   <h2>Using the <i> Datatables to show pagination </i> in the table.</h2>
   <div class = "car-table">
      <table id = "car">
         <thead>
            <tr>
               <th> Model </th>
               <th> Year </th>
               <th> Country </th>
               <th> Brand </th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td> Toyota </td>
               <td> Auris </td>
               <td> 2017 </td>
               <td> Japan </td>
            </tr>
            <tr>
               <td> Toyota </td>
               <td> Avensis </td>
               <td> 2016 </td>
               <td> Japan </td>
            </tr>
            <tr>
               <td> Honda </td>
               <td> Civic </td>
               <td> 2018 </td>
               <td> Japan </td>
            </tr>
            <tr>
               <td> Tata </td>
               <td> Nexon </td>
               <td> 2022 </td>
               <td> India </td>
            </tr>
            <tr>
               <td> Maruti </td>
               <td> Baleno </td>
               <td> 2019 </td>
               <td> India </td>
            </tr>
            <tr>
               <td> Maruti </td>
               <td> Swift </td>
               <td> 2017 </td>
               <td> India </td>
            </tr>
            <tr>
               <td> Hyundai </td>
               <td> Verna </td>
               <td> 2018 </td>
               <td> South Korea </td>
            </tr>
         </tbody>
      </table>
   </div>
   <div id="paginationContainer"></div>
   <script>
      $(document).ready(function () {
         var table = $('#car').DataTable({
            "paging": true,
            "pageLength": 3
         });
      });
   </script>
</body>
</html>

Copy after login

Example 2

In the example below, we create a table to store food-related data. Here we create an array of objects containing food information such as food name, calories, fat, carbs, etc.

After that, we loop through the array, create a table row for each object of the array, and append it to the table body. Furthermore, we executed the dataTables() method without passing any parameters for the food table.

In the output, the user can observe that by default 10 values are displayed per page. However, the user can change it to 50 and 100.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
   <link rel = "stylesheet" href = "https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
   <script src = "https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"> </script>
   <style>
      .food-table { width: 500px;}
   </style>
</head>
<body>
   <h2>Using the <i> Datatables to show pagination </i> in the table.</h2>
   <div class = "food-table">
      <table id = "food">
         <thead>
            <tr>
               <th> Food </th>
               <th> Calories </th>
               <th> Fat </th>
               <th> Carbs </th>
            </tr>
         </thead>
         <tbody>
         </tbody>
      </table>
   </div>
   <div id="paginationContainer"></div>
   <script>
      // create array of above table
      const foods = [
         { name: "Bread", calories: 100, fat: 10, carbs: 20 },
         { name: "Butter", calories: 50, fat: 5, carbs: 10 },
         { name: "Avocado", calories: 500, fat: 50, carbs: 60 },
         { name: "Apple", calories: 600, fat: 60, carbs: 70 },
         { name: "Orange", calories: 700, fat: 70, carbs: 80 },
         { name: "Watermelon", calories: 800, fat: 80, carbs: 90 },
         { name: "Strawberry", calories: 900, fat: 90, carbs: 100 },
         { name: "Blueberry", calories: 1000, fat: 100, carbs: 110 },
         { name: "Raspberry", calories: 1200, fat: 120, carbs: 130 },
         { name: "Cherry", calories: 1300, fat: 130, carbs: 140 },
         { name: "Plum", calories: 1400, fat: 140, carbs: 150 },
         { name: "Peach", calories: 1500, fat: 150, carbs: 160 },
         { name: "Pear", calories: 1600, fat: 160, carbs: 170 },
         { name: "Grapes", calories: 1700, fat: 170, carbs: 180 },
         { name: "Banana", calories: 1800, fat: 180, carbs: 190 },
         { name: "Pineapple", calories: 1900, fat: 190, carbs: 200 },
         { name: "Mango", calories: 2000, fat: 200, carbs: 210 },
         { name: "Papaya", calories: 2100, fat: 210, carbs: 220 },
         { name: "Kiwi", calories: 2200, fat: 220, carbs: 230 },
         { name: "Grapefruit", calories: 2300, fat: 230, carbs: 240 },
         { name: "Lemon", calories: 2400, fat: 240, carbs: 250 },
         { name: "Lime", calories: 2500, fat: 250, carbs: 260 },
      ]
      // accessing the table and adding data
      const table = document.querySelector('#food tbody')
      foods.forEach(food => {
         const row = document.createElement('tr')
         row.innerHTML = `
         <td> ${food.name} </td>
         <td> ${food.calories} </td>
         <td> ${food.fat} </td>
         <td> ${food.carbs} </td>
         `
         table.appendChild(row)
      })
      $(document).ready(function () {
         var table = $('#food').DataTable();
      });
   </script>
</body>
</html>

Copy after login

We learned to use jQuery's DataTable plug-in to add paging functionality to the table. We also learned to set a custom page length. Additionally, we can create a custom input field to receive the page length and set the page length according to the user's preference.

The above is the detailed content of Using data table pagination. For more information, please follow other related articles on the PHP Chinese website!