ホームページ > ウェブフロントエンド > jsチュートリアル > データテーブルの使用方法の学習

データテーブルの使用方法の学習

巴扎黑
リリース: 2017-06-26 14:22:27
オリジナル
1766 人が閲覧しました

私は最近、PC 側で Web 開発を行うときにデータテーブルを使用しました。このツールは非常に使いやすいと言わざるを得ません。 (ps: データ量が多い場合は、フロントエンド ページングではなくサーバーサイド ページングを使用することをお勧めします)

現在、関連する設定の使用記録は次のとおりです

Configuration

var table = $("#table").DataTable({"ajax": {url: "/getusr/",type: "POST",data: function (d) {d.group = $(".group")[0].innerText;//ajax传递参数}},"columns": [{"data": "name"},{"data": "id"},{"data": "pass"}],"searching": true,"ordering": false,//是否排序,否时直接根据数组顺序显示"paging": true,"info": true,"autoWidth": true,//自动调整宽度"scrollX": true,"sScrollX": "100%","fixedColumns": {leftColumns: 2, bAll: true, "sHeightMatch": "auto"},//左侧边栏多少个列固定在左边。需要引入第三方插件,datatables/extensions/FixedColumns/js/dataTables.fixedColumns.js"fnDrawCallback": function (oSettings) {//重绘回调函数$(".select").msDropDown();},"columnDefs": [{"targets": [0],"width": "30%","className": "j-thead0","render": function (data) {return "<div><a>" + data + "</a></div>";}}]});
ログイン後にコピー

よく使用される API

table.relayout();//显示table区域的大小发生改变时(eg:window resize... ) 可调用其布局函数table.fixedColumns().relayout();//在使用了fixedcolumns时,当table relayout后有时候也需要手动将fixedcolumns 进行relayouttable.ajax.reload();//根据筛选条件重新发起ajax请求,reload tablevar column = table.column(index);//针对index列进行隐藏or显示,适用于datatables过长时不同view mode下列的显示column.visible(false);
ログイン後にコピー

追加機能

ページを上にスクロールし、データテーブルのヘッダーがウィンドウの上部に触れると修正されます。 実装コードは次のとおりです:

1. スクロール イベントをドキュメントにバインドします

document.addEventListener("scroll",handleHeader);//
ログイン後にコピー

2. 一番上までスクロールし、ヘッダーをクローンして修正します。そうでない場合は、非表示にするか削除します (データテーブル レイアウトに変更がある場合は、クローンによって生成されたヘッダーを削除して更新する必要があります。そうしないと、ヘッダーが一致しません。 (╯□╰)o)

れぇ

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

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