jQueryデータテーブルとは何ですか?データテーブルの使い方

Datatables の概要

DataTables は、jQuery テーブル プラグインです。これは、高度なインタラクティブ コントロールとあらゆる HTML フォームのサポートを追加する、漸進的な機能拡張に基づいた非常に柔軟なツールです。主な機能:

• 自動ページング処理

• インスタントテーブルデータフィルタリング

• データの並べ替えとデータ型の自動検出

• 列の自動処理幅

• CSS経由でスタイルをカスタマイズ可能

• 非表示の列をサポート

• 使いやすさ

• 拡張性と柔軟性

• 国際化

• 更新情報 を作成するtable

• 無料

2. 使い方
バックエンドを行う際、データを表示するために協力してくれるアーティストやフロントエンドエンジニアはいません。特定の美的感覚を持っている場合は、タスクを完了するために jQuery の DataTables プラグインを使用できます
1 DataTables のデフォルト設定

 $(document).ready(function() { 
$('#example').dataTable(); 
} );

2。

 "bPaginate": true, //翻页功能 
"bLengthChange": true, //改变每页显示数据数量 
"bFilter": true, //过滤功能 
"bSort": false, //排序功能 
"bInfo": true,//页脚信息 
"bAutoWidth": true//自动宽度

3 、データの並べ替え

$(document).ready(function() { 
$('#example').dataTable( { 
"aaSorting": [ 
[ 4, "desc" ] 
] 
} ); 
} );

列0から開始して列4で逆順に並べ替えます
4. いくつかの列を非表示にします

$(document).ready(function() { 
$('#example').dataTable( { 
"aoColumnDefs": [ 
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] }, 
{ "bVisible": false, "aTargets": [ 3 ] } 
] } ); 
} );

5、国際化

$(document).ready(function() { 
$('#example').dataTable( { 
"oLanguage": { 
"sLengthMenu": "每页显示 _MENU_ 条记录", 
"sZeroRecords": "抱歉， 没有找到", 
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据", 
"sInfoEmpty": "没有数据", 
"sInfoFiltered": "(从 _MAX_ 条数据中检索)", 
"oPaginate": { 
"sFirst": "首页", 
"sPrevious": "前一页", 
"sNext": "后一页", 
"sLast": "尾页" 
}, 
"sZeroRecords": "没有检索到数据", 
"sProcessing": "<img src=&#39;./loading.gif&#39; />" 
} 
} ); 
} );

6. 並べ替え機能:

$(document).ready(function() { 
$('#example').dataTable( { 
"aoColumns": [ 
null, 
{ "asSorting": [ "asc" ] }, 
{ "asSorting": [ "desc", "asc", "asc" ] }, 
{ "asSorting": [ ] }, 
{ "asSorting": [ ] } 
] 
} ); 
} );

7. データ取得は 4 つのタイプをサポートします。フォローします

• •DOM 文書データ
  

• •JavaScript 配列 js 配列
  

• •Ajax ソース Ajax リクエスト データ
  

• •サーバー側処理 サーバー側データ

以上がjQueryデータテーブルとは何ですか?データテーブルの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。