데이터 테이블 사용법 학습

최근 PC측에서 웹 개발을 할 때 데이터 테이블을 사용해봤는데 이 도구가 사용하기 매우 편리하다고 말씀드리고 싶습니다. (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 (╯□╰)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");}}}

위 내용은 데이터 테이블 사용법 학습의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!