jQuery.datatables.jsプラグインの使用法とAPIインスタンスの詳細

1、DataTablesのデフォルト設定

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

例：http://www.guoxk.com/html/DataTables/ゼロ-設定.html

2、DataTablesの基本的な属性設定

"bPaginate": true, //ページング機能
"bLengthChange": true, //ページご表示するデータ数を変更
"bFilter": true, //フィルタリング機能
"bSort": false, //ソート機能
"bInfo": true,//フッター情報
"bAutoWidth": true//自動幅

例：http://www.guoxk.com/html/DataTables/機能-enablement.html

3、データソート

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

第0列から始め、第4列の降順ソート

例：http://www.guoxk.com/html/DataTables/ソート-data.html

4、複数の列でソート

例：http://www.guoxk.com/html/DataTables/マルチ-column-sorting.html

5、特定の列を隠す

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

例：http://www.guoxk.com/html/DataTables/隠し-columns.html

6、ページ上の要素の位置を変更

$(document).ready(function() {
$('#example').dataTable({
"sDom": '<"top"fli>rt<"bottom"p><"clear">'
});
});
//l- ページご表示する数
//f - フィルタリング入力
//t - フォームテーブル
//i – インフォメーション
//p – ページナビゲーション
//r – pRocessing
//< and > – div要素
//<"class" and > – クラスを持つdiv
//例: <"wrapper"flipt>, <lf<tip>>

例：http://www.guoxk.com/html/DataTables/DOM-positioning.html

7、状態保存、ページナビゲーションまたは一頁表示データ数の変更を行った場合、cookieに保存され、次回アクセス時に最後に閉じたページの内容が表示されます。

$(document).ready(function() {
$('#example').dataTable({
"bStateSave": true
});
});

例：http://www.guoxk.com/html/DataTables/State-saving.html

8、数字を表示するページナビゲーションスタイル

$(document).ready(function() {
$('#example').dataTable({
"sPaginationType": "full_numbers"
});
});

例：http://www.guoxk.com/html/DataTables/Alternative-pagination-styles.html

9、水平制限幅

$(document).ready(function() {
$('#example').dataTable({
"sScrollX": ""100%
"sScrollXInner": ""110%
"bScrollCollapse": true
});
});

例：http://www.guoxk.com/html/DataTables/Horizontal.html

10、垂直制限高さ

例：http://www.guoxk.com/html/DataTables/Vertical.html

11、水平と垂直の両方の方向で制限

例：http://www.guoxk.com/html/DataTables/HorizontalVerticalBoth.html

12、言語変更

$(document).ready(function() {
$('#example').dataTable({
"oLanguage": {
"sLengthMenu": "每頁 _MENU_ 件記録表示"
"sZeroRecords": "申し訳ありませんが、見つかりませんでした"
"sInfo": "_START_ から _END_ まで" /合計 _TOTAL_ 件データ
"sInfoEmpty": "データがありません"
"sInfoFiltered": "(全 _MAX_ 件データから検索)"
"oPaginate": {
"sFirst": "最初のページ"
"sPrevious": "前のページ"
"sNext": "次のページ"
"sLast": "最終ページ"
″: “A”
"sZeroRecords": "データが見つかりません"
"sProcessing": "<img src='#'" /loading.gif' /">
}
});
});

例：http://www.guoxk.com/html/DataTables/Change-language-row

13、clickイベント

例：http://www.guoxk.com/html/DataTables/event-click.html

14/tooltipプラグインと併用

例：http://www.guoxk.com/html/DataTables/tooltip.html

15、定義每頁表示データ数量

$(document).ready(function() {
$('#example').dataTable({
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
});
});

例：http://www.guoxk.com/html/DataTables/length_menu.html

16、row callback

例：http://www.guoxk.com/html/DataTables/RowCallback.html

最後の列の値が"A"の場合は太字で表示します

17、ソート制御

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

例：http://www.guoxk.com/html/DataTables/sort.html

説明：最初の列をクリックするとデフォルトのソートが適用され、2列目をクリックすると既に順序付けされています、3列目をクリックすると1回逆順、2回目は順序、4,5列をクリックするとソートを実行しません

18、設定ファイルから言語パックを読み込む

$(document).ready(function() {
$('#example').dataTable({
"oLanguage": {
"sUrl": "cn.txt"
}
});
});

19、ajaxソースを使用する

$(document).ready(function() {
$('#example').dataTable({
"bProcessing": true,
"sAjaxSource": "."/arrays.txt'
});
});

例：http://www.guoxk.com/html/DataTables/ajax.html

20、ajaxを使用して、サーバー側でデータを整理する

$(document).ready(function() {
$('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "."/server_processing.php",
/*以下の内容を追加すると、POSTメソッドでデータを送信します
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}*/
"oLanguage": {
"sUrl": "cn.txt"
″: “A”
"aoColumns": [
{"sName": "platform" },
{"sName": "version" },
{"sName": "engine" },
{"sName": "browser" },
{"sName": "grade" }
]//$_GET['sColumns']はaoColumnsが渡すデータを受け取ります
});
});

例：http://www.guoxk.com/html/DataTables/ajax-serverSide.html

21、各行にIDとclassをロードする

サーバー側から返されるデータの形式：

}
{8
“DT_RowId”: “row_
“DT_RowClass”: “gradeA”,
″,1“0″: “Gecko”, 1″: “5
″,2″: “Firefox 98+ / ″: “Win2+OSX.
″,3”,1″: “8
″,4“
″: “A”

例：http://www.guoxk.com/html/DataTables/}

22add_id_class.html+、各行に詳細を表示するために、行の先頭の“

例：http://www.guoxk.com/html/DataTables/”で詳細を展開表示-with-row

23、information.html

例：http://www.guoxk.com/html/DataTables/、複数行を選択

22、jQueryプラグインのjEditableを統合

例：http://www.guoxk.com/html/DataTables/jEditable-integration.html

さらに詳しい情報：

注意点として、dataTableで処理されるtableオブジェクトは、theadとtbodyを持っている必要があり、構造は整然としている必要があります（データは完全でなくても構いません）。これで正しく処理できます。

dataTableにバインドする際に追加できるパラメータは以下の通りです：

上記は、編集者が皆さんに紹介したjQuery.datatables.jsプラグインの使い方及びAPIインスタンスの詳細です。皆さんに役立つことを願っています。何か疑問があれば、コメントを残してください。編集者はすぐに回答します。このサイトへのサポートに感謝しています！

声明：この記事の内容はインターネットから取得され、著作権者に帰属します。インターネットユーザーによって自発的に提供されたコンテンツであり、このサイトは所有権を持ちません。人工的な編集は行われていません。また、関連する法的責任を負いません。著作権侵害の疑いがある場合は、メールを送信してください：notice#oldtoolbag.com（メールを送信する際には、#を@に変更してください。報告を行い、関連する証拠を提供してください。一旦確認がとれましたら、このサイトは即座に侵害疑いの内容を削除します。)