ホームページ > ウェブフロントエンド > jsチュートリアル > jQueryデータテーブルとは何ですか?データテーブルの使い方

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

伊谢尔伦
リリース: 2017-07-22 09:15:05
オリジナル
1800 人が閲覧しました

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() { 
$(&#39;#example&#39;).dataTable( { 
"aoColumns": [ 
null, 
{ "asSorting": [ "asc" ] }, 
{ "asSorting": [ "desc", "asc", "asc" ] }, 
{ "asSorting": [ ] }, 
{ "asSorting": [ ] } 
] 
} ); 
} );
ログイン後にコピー

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

  • •DOM 文書データ

  • •JavaScript 配列 js 配列

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

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

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート