apprentissage de l'utilisation des tables de données

J'ai récemment utilisé des datatables lors du développement web sur PC, je dois dire que cet outil est très pratique à utiliser. (ps : il est recommandé d'utiliser la pagination côté serveur au lieu de la pagination frontale lorsque la quantité de données est importante)

L'utilisation de la configuration pertinente est désormais enregistrée comme suit

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 couramment utilisées

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

Fonctions supplémentaires ajoutées

Faites défiler la page vers le haut et corrigez-la lorsque les tables de données l'en-tête touche le haut de la fenêtre. Le code d'implémentation est le suivant :

1. Liez l'événement de défilement au document

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

2. top, clonez l'en-tête et corrigez-le, sinon masquez ou supprimez (datatbles) tout ce qui se passe sur la mise en page se produira. Pour modifier l'en-tête généré par le clone, supprimez-le et mettez-le à jour, sinon l'en-tête ne correspondra pas, o (╯□╰) o)

function handleHeader(){var normalHeader = $(".normalHeader");var dataTables_scroll = $(".dataTables_scroll");//生成的datatabledivvar DTFC_LeftWrapper = $(".DTFC_LeftWrapper");//fixedColumns 生成的左边两个固定columnsif((normalHeader.offset().top-$(window).scrollTop())<5){if(!headerCreated){newHeader = dataTables_scroll.clone().addClass("fixedHeader newHeader");newLeft = DTFC_LeftWrapper.clone().addClass("fixedLeft newLeft");$(newHeader).find(".dataTables_scrollBody").css("display","none");$(newLeft).find(".DTFC_LeftBodyWrapper").css("display","none");var scrollWidth = dataTables_scroll.width();newHeader.css("width",scrollWidth);newLeft.css("left","");newHeader.appendTo( ".DTFC_ScrollWrapper" );newLeft.appendTo( ".DTFC_ScrollWrapper" );headerCreated = true;}else{newHeader.removeClass("hidden");newLeft.removeClass("hidden");}}else{if(newHeader||newLeft){newHeader.addClass("hidden");newLeft.addClass("hidden");}}}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!