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

私は最近、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 サイトの他の関連記事を参照してください。