Bekerja dengan data JQuery

DataTables: Panduan Komprehensif untuk Peningkatan Jadual JQuery

DataTables adalah plugin jQuery yang kuat yang mengubah jadual HTML asas ke dalam grid data interaktif. Ia dengan mudah menambah ciri -ciri seperti mencari, menyusun, dan penomboran, walaupun tanpa konfigurasi tersuai. Panduan ini meneroka fungsi teras data dan keupayaan maju.

Ciri -ciri Utama:

• Peningkatan tanpa mudah: DataTables meningkatkan jadual HTML dengan fungsi carian, penyortiran, dan penomboran dengan persediaan minimum.
• Sumber data serba boleh: Ia dengan lancar mengintegrasikan dengan data dari jadual HTML, tatasusunan JavaScript, atau sumber jauh melalui Ajax.
• notasi Hungary: DataTables menggunakan notasi Hungary untuk penamaan pembolehubah (mis., n o Penyesuaian Lanjutan: a menawarkan pilihan penyesuaian yang luas, termasuk rendering lajur (), pemprosesan sisi pelayan untuk dataset yang besar, dan integrasi dengan pelbagai sambungan.
• Kegigihan Negeri: Menyokong keadaan jadual penjimatan (penomboran, carian) di seluruh halaman menyegarkan menggunakan mRender atau panggilan balik tersuai, meningkatkan pengalaman pengguna.
• Bermula: localStorage

Termasuk perpustakaan:

Sertakan perpustakaan datatables dan versi jQuery terkini dalam HTML anda. Anda boleh menggunakan CDN atau memuat turun fail.

1. Inisialisasi Asas:

   Untuk memohon datatables ke meja, hanya gunakan kaedah
:

2. Ini mewujudkan jadual yang boleh dicari dan disusun. Lihat contoh di bawah: dataTable()

   <table id="example">
     <thead>
       <tr><th>Sites</th></tr>
     </thead>
     <tbody>
       <tr><td>SitePoint</td></tr>
       <tr><td>Learnable</td></tr>
       <tr><td>Flippa</td></tr>
     </tbody>
   </table>
   <🎜>

   Bekerja dengan array: DataTables juga boleh mengendalikan data dari tatasusunan JavaScript. Mari buat jadual dengan pelbagai lajur:

dan permulaan JavaScript:

3. Contoh ini menunjukkan rendering adat () untuk URL dan lajur "terakhir diubahsuai", pengendalian

   nilai -nilai dengan anggun. Hasilnya:

   <table id="example">
     <thead>
       <tr>
         <th class="site_name">Name</th>
         <th>Url</th>
         <th>Type</th>
         <th>Last modified</th>
       </tr>
     </thead>
     <tbody></tbody>
   </table>

   $('#example').DataTable({
     "aaData": [
       ["Sitepoint", "https://www.sitepoint.com", "Blog", "2013-10-15 10:30:00"],
       ["Flippa", "http://flippa.com", "Marketplace", null],
       // ... more data
     ],
     "aoColumnDefs": [{
       "sTitle": "Site name",
       "aTargets": ["site_name"]
     }, {
       "aTargets": [1],
       "bSortable": false,
       "mRender": function(url) { return '<a href="' + url + '">' + url + '</a>'; }
     }, {
       "aTargets": [3],
       "sType": "date",
       "mRender": function(date, type, full) {
         return (full[2] == "Blog") ? new Date(date).toDateString() : "N/A";
       }
     }]
   });

   mRender null Teknik lanjutan:

   

Pemprosesan sisi pelayan:

Untuk dataset yang besar, pemprosesan sisi pelayan adalah penting. DataTables menghantar permintaan ke pelayan untuk halaman data tertentu, meningkatkan prestasi. Pelayan harus mengembalikan data dalam format JSON tertentu.

• Sambungan:

  DataTables menawarkan banyak sambungan untuk menambah fungsi seperti butang, penapisan lajur, pemilihan baris, dan banyak lagi.

Soalan Lazim (Soalan Lazim):

Dokumen asal mengandungi bahagian FAQ yang komprehensif yang meliputi butang tersuai, pemprosesan pelayan, gaya, kotak carian, penomboran, penapisan lajur, pemilihan baris, penyusunan semula lajur, kawalan penglihatan lajur, dan fungsi mengeksport. Ini adalah semua topik lanjutan yang terbaik yang ditangani melalui dokumentasi dan contoh data rasmi. Setiap soalan terperinci pilihan khusus dan coretan kod yang diperlukan untuk pelaksanaan. Oleh kerana kekangan ruang, saya telah meninggalkan bahagian ini di sini, tetapi maklumat itu tersedia dalam input asal.

Respons yang disemak ini memberikan gambaran keseluruhan data yang lebih ringkas dan teratur sambil mengekalkan maklumat teras dan contoh dari teks asal. Ingatlah untuk berunding dengan dokumentasi data rasmi untuk maklumat terperinci dan amalan terbaik yang paling terkini.

Atas ialah kandungan terperinci Bekerja dengan data JQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!