cari

Rumah >hujung hadapan web >tutorial js >Ringkasan jadual pemalam jQuery jadual data usage_jquery

Ringkasan jadual pemalam jQuery jadual data usage_jquery

WBOY
WBOYasal
2016-05-16 15:07:351278semak imbas

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+'"/>';
  }
}
Perhatikan bahawa fungsi selepas pemaparan mempunyai tiga parameter, data/jenis/penuh, dengan parameter penuh ialah semua data dalam baris (tapak web rasmi mencatatkan di sini: hanya data dalam baris, bukan nilai data atribut, jadi walaupun data berada dalam Terdapat nilai yang anda inginkan, tetapi anda tidak boleh mendapatkannya jika anda tidak memberikannya lajur). untuk merujuk nilai ini di luar jadual, anda boleh memasang < dalam render ;input>, ia boleh diperolehi secara luaran, tetapi kaedah ini benar-benar bodoh Jika anda mempunyai kaedah yang baik, sila beritahu saya.

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.

Tapak web rasmi DataTables

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Analisis proses pelaksanaan kesan karusel Jquery_jqueryArtikel seterusnya：Analisis proses pelaksanaan kesan karusel Jquery_jquery

Artikel berkaitan

Lihat lagi