Lernen zur Verwendung von Datentabellen

Ich habe kürzlich bei der Webentwicklung auf dem PC Datentabellen verwendet. Ich muss sagen, dass dieses Tool sehr praktisch ist. (ps: Es wird empfohlen, serverseitiges Paging anstelle von Front-End-Paging zu verwenden, wenn die Datenmenge groß ist)

Die relevante Konfigurationsnutzung wird jetzt wie folgt aufgezeichnet

Konfiguration

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>";}}]});

Häufig verwendete APIs

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);

Zusätzliche Funktionen hinzugefügt

Scrollen Sie die Seite nach oben und korrigieren Sie das Problem, wenn die Datentabellen angezeigt werden Die Kopfzeile berührt den oberen Rand des Fensters:

1. Scrollen Sie nach oben , Header klonen und reparieren, andernfalls wird alles im Layout ausgeblendet oder gelöscht(datatbles). Um den vom Klon generierten Header zu ändern, löschen und aktualisieren Sie ihn, sonst stimmt der Header nicht überein, o(╯□╰)o)

document.addEventListener("scroll",handleHeader);//

Das obige ist der detaillierte Inhalt vonLernen zur Verwendung von Datentabellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!