DataTables ialah pemalam jadual jQuery Artikel ini berkongsi dengan anda cara menggunakan jadual data pemalam dan memperkenalkan beberapa pengetahuan asas Kandungan khusus adalah seperti berikut
1. Permulaan
Dalam halaman
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.css"> <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script> </head> <body> <table id="table_id" class="display"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> </tr> </thead> <tbody> <tr> <td>Row 1 Data 1</td> <td>Row 1 Data 2</td> </tr> <tr> <td>Row 2 Data 1</td> <td>Row 2 Data 2</td> </tr> </tbody> </table> </body> </html>
Inisialisasi dalam js
$(document).ready( function () { $('#table_id').DataTable(); } );
2. Konfigurasi biasa
Semasa pemulaan, anda boleh mengkonfigurasi jadual melalui beberapa item konfigurasi yang biasa digunakan Inilah yang sebenarnya saya gunakan dalam projek
$("#vivo_table_list").dataTable({ pageLength: 10, //更改初始页面长度 (每页的行数) processing: true, //显示正在处理字符串 serverSide: false, // 服务器模式,这一点非常奇怪* ordering: true, // 是否启用Datatables排序 searching: false, // 开启搜索 autoWidth: false, zeroRecords: "没有查询数据", destroy: true, // 从当前上下文销毁掉Datatables对象 (妹搞懂) pagingType: "input", // 分页按钮种类显示选项 language: { url: "cn.txt" // 本地化 }, dom: "tr<'row-fluid'<'span6'i><'span6'p>>", // 按什么顺序定义表的控制元素在页面上出现(妹搞懂) ajax: { url: "/url", type: "post", // ajax请求的类型 ** data: function () { return that.getQueryParams(); // ajax的参数 } }, columns: [ {title: "id", data: "id", orderable: true}, {title: "uid", data: "uid", orderable: false}, {title: "昵称", data: "nick", orderable: false}, {title: "姓名", data: "name", orderable: false}, {title: "电话", data: "tel", orderable: false}, {title: "申请时间", data: "stimeshow", orderable: true}, {title: "状态", data: "statshow", orderable: false}, { title: "操作", orderable: false, render: function (data,type,full) { return '<button id="msgsndButton" class="msgsnd glyphicon glyphicon-comment"></button>' + ' <button id="forbidButton" class="forbid glyphicon glyphicon-thumbs-down"></button>'+ '<input type="hidden" value="'+full.id+'"/>'; } } ] });
Data yang dikembalikan oleh latar belakang mestilah peta, kuncinya ialah "data", dan nilainya ialah data (jika data ialah Senarai, toArray() diperlukan), di mana data juga merupakan salah satu parameter daripada DataTables, menunjukkan data yang akan dipaparkan dalam jadual, jadi Anda boleh meletakkan parameter jadual lain dalam peta ini, cuma tetapkan kunci kepada nama parameter.
*: Dalam konfigurasi, serverSide menghidupkan mod pelayan Semasa kerja, data jadual diperoleh dari latar belakang melalui ajax, jadi mod ini dihidupkan sudah tentu, tetapi jadual adalah pasti Fungsi pengisihan mengikut satu lajur telah dilumpuhkan, dan kemudian saya mematikan mod ini dan mendapati bahawa saya boleh mengisih lajur dalam jadual, dan data dalam jadual masih diperolehi dari pelayan... Jadi mod ini masih perlu dipelajari
**: Dalam projek, parameter yang diterima oleh pengawal latar belakang ialah tatasusunan Apabila permintaan ajax mengandungi parameter yang kompleks, jenis permintaan mestilah diposkan;
3. Fungsi lanjutan
1. Lajur tersembunyi
Anda boleh menentukan sama ada lajur dipaparkan melalui atribut "columns.visible", tetapi dengan cara ini anda tidak boleh mendapatkan nilai lajur ini Jika anda ingin menyembunyikan lajur id dan mencetuskan acara berdasarkan id, anda tidak boleh lakukannya = =. Kemudian, selepas menyemak API, saya mendapat idea bodoh
{ title: "操作", orderable: false, render: function (data,type,full) { return '<input type="hidden" value="'+full.id+'"/>'; } }
2. Masukkan nombor halaman untuk melompat ke halaman
Kita boleh menetapkan gaya butang paging table melalui atribut pagingType, tetapi beberapa gaya lalai DataTables tidak mempunyai gaya untuk memasukkan nombor halaman untuk melompat yang diperlukan dalam projek. Walau bagaimanapun, beberapa pemalam butang paging diperkenalkan pada halaman pemalam laman web rasmi Antaranya, pemalam paging input boleh memenuhi keperluan kami Hanya memperkenalkan js pemalam dan menukar nilai pagingType kepada "input". CDN bagi fail js ialah:
//cdn.datatables.net/plug-ins/1.10.11/pagination/input.js
Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.