jQuery テーブルプラグイン datatable の概要 use

jQuery テーブルプラグイン datatable の概要 use_jquery

WBOY

リリース： 2016-05-16 15:07:35

オリジナル

1232 人が閲覧しました

DataTables は、jQuery テーブルプラグインです。この記事では、テーブルプラグイン datatable の使用方法と基本的な知識を紹介します。具体的な内容は次のとおりです。

1. 初期化
ページ内

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

ログイン後にコピー

js での初期化

$(document).ready( function () {
 $('#table_id').DataTable();
} );

ログイン後にコピー

2. 共通構成
初期化中に、一般的に使用されるいくつかの構成項目を通じてテーブルを構成できます。これは、プロジェクト

で実際に使用したものです。

$("#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」、値はデータです (データがリストの場合は、toArray() が必要です)。データもパラメータの 1 つです。 DataTables の、テーブルに表示されるデータを示すため、キーをパラメータ名に設定するだけで、このマップに他のテーブルパラメータを配置できます。

*: 設定では、serverSide がサーバーモードをオンにし、作業中にテーブルのデータを ajax を通じてバックグラウンドから取得するため、このモードがオンになります。当然のことですが、テーブルは確かです 1つの列でソートする機能が無効になっていましたが、このモードをオフにすると、テーブル内の列をソートできることがわかり、テーブル内のデータは引き続き取得されましたサーバーから... したがって、このモードはまだ研究する必要があります

**: プロジェクトでは、バックグラウンドコントローラーが受け取るパラメーターは配列です。ajax リクエストに複雑なパラメーターが含まれる場合、リクエストタイプは

である必要があります。

3. 高度な機能
1. 非表示の列
「columns.visible」属性を使用して列を表示するかどうかを指定できますが、この方法では、ID 列を非表示にして ID に基づいてイベントをトリガーしたい場合に、この列の値を取得することはできません。 do it = = 後、API を確認したところ、解決策は columns.render 属性を使用することです。

{
  title: "操作", orderable: false, render: function (data,type,full) {
  return '<input type="hidden" value="'+full.id+'"/>';
  }
}

ログイン後にコピー

レンダリング後の関数には、data/type/full という 3 つのパラメーターがあることに注意してください。ここで、完全なパラメーターは行内のすべてのデータです (公式 Web サイトの注意事項: データの値ではなく、行内のデータのみです)属性があるため、必要な値がある場合でも、列を指定しないと取得できません）必要に応じて、レンダリングで非表示にしたい値を直接使用できます。この値をテーブルの外で参照するには、render.input> で隠してアセンブルすることもできますが、この方法は本当に愚かです。良い方法があれば教えてください。

2. ページ番号を入力してページに移動します
pagingType 属性を使用してテーブルのページングボタンのスタイルを設定できますが、DataTable のいくつかのデフォルトスタイルには、プロジェクトで必要なジャンプするページ番号を入力するスタイルがありません。ただし、公式サイトのプラグインページにはいくつかのページングボタンプラグインが紹介されていますが、その中でも入力ページングプラグインはプラグインのjsを導入し、pagingTypeの値を変更するだけでニーズを満たすことができます。「入力」すること。 js ファイルの CDN は次のとおりです:

//cdn.datatables.net/plug-ins/1.10.11/pagination/input.js

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。

DataTables 公式ウェブサイト