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='./loading.gif' />" } } ); } );
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 サイトの他の関連記事を参照してください。