私は最近、PC 側で Web 開発を行うときにデータテーブルを使用しました。このツールは非常に使いやすいと言わざるを得ません。 (ps: データ量が多い場合は、フロントエンド ページングではなくサーバーサイド ページングを使用することをお勧めします)
現在、関連する設定の使用記録は次のとおりです
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>";}}]});
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 サイトの他の関連記事を参照してください。