Menggunakan penomboran jadual data-tutorial css-php.cn

Menggunakan penomboran jadual data

WBOY

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

ke hadapan

1239 orang telah melayarinya

Menggunakan penomboran jadual data

Kita boleh menggunakan teknologi paging untuk memaparkan sejumlah besar data dalam ketulan yang lebih kecil. Contohnya, kedai dalam talian seperti Amazon dan Flipkart menyenaraikan berjuta-juta produk. Jadi jika mereka tidak menggunakan teknologi penomboran untuk memaparkan data, pengguna perlu menatal ke hujung halaman web untuk melihat produk terakhir. Sekarang, fikirkan tentang berapa banyak penatalan yang diperlukan untuk mendapatkan produk terakhir di antara berjuta-juta produk.

Dalam teknologi penomboran, kami memaparkan jumlah data tertentu pada satu halaman. Sebagai contoh, jika kita menetapkan panjang setiap halaman kepada 100, pengguna boleh melihat 100 produk pertama pada halaman pertama, 100 produk lain pada halaman kedua dan seterusnya.

Dalam jQuery, pemalam Datatables digunakan untuk memformat data jadual HTML. Selain itu, ia membenarkan menambah fungsi penomboran pada jadual.

Terjemahan bahasa Cina bagi

Syntax

ialah:

Tatabahasa

Pengguna boleh menggunakan API Datatables untuk menambah penomboran pada jadual menggunakan sintaks berikut.

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

Salin selepas log masuk

Dalam sintaks di atas, pengguna boleh menggunakan nilai boolean "true" atau "false" untuk menunjukkan atau menyembunyikan penomboran. Sifat pageLength menentukan jumlah bilangan entri yang dipaparkan pada satu halaman.

Terjemahan bahasa Cina bagi

Contoh 1

ialah:

Contoh 1

Dalam contoh di bawah, kami mencipta jadual data kad. Selain itu, kami menambah 'id' dengan nilai 'kereta'.

Dalam jQuery, kami mengakses jadual menggunakan idnya dan melaksanakan fungsi DataTable() . Selain itu, kami menyerahkan objek ini sebagai hujah kepada kaedah datatable(). Objek ini mengandungi "paging: true" dan "pageLength: 3" untuk menetapkan paging, menunjukkan 3 item setiap halaman.

<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>

Salin selepas log masuk

Contoh 2

Dalam contoh di bawah, kami telah mencipta jadual untuk menyimpan data berkaitan makanan. Di sini kami mencipta pelbagai objek yang mengandungi maklumat makanan seperti nama makanan, kalori, lemak, karbohidrat, dll.

Selepas itu, kami melingkari tatasusunan, mencipta baris jadual untuk setiap objek tatasusunan dan menambahkannya pada badan jadual. Tambahan pula, kami melaksanakan kaedah dataTables() tanpa melepasi sebarang parameter untuk jadual makanan.

Dalam output, pengguna boleh melihat bahawa secara lalai 10 nilai dipaparkan setiap halaman. Walau bagaimanapun, pengguna boleh menukarnya kepada 50 dan 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>

Salin selepas log masuk

Kami belajar menggunakan pemalam DataTable jQuery untuk menambah fungsi penomboran pada jadual. Kami juga belajar untuk menetapkan panjang halaman tersuai. Selain itu, kami boleh mencipta medan input tersuai untuk menerima panjang halaman dan menetapkan panjang halaman mengikut keutamaan pengguna.

Atas ialah kandungan terperinci Menggunakan penomboran jadual data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!