본문 바로가기
반응형

공부기록/라이브러리11

[Tabulator] 페이징 방법(pagination local vs. remote) Tabulator에는 pagination 기능을 지원한다. 두 가지 방식으로 사용이 가능하다. local과 remote 용어에서 보면 알 수 있듯 local은 tabulator를 사용한 페이지 내에서 pagination을 가능하게 하고 remote는 서버 자체에서 pagination을 구현할 수 있도록 지원하는 속성이다. 1. local ------ javascript ------ var table = new Tabulator("#table1", { layout:"fitColumns", placeholder:"데이터가 존재하지 않습니다.", pagination:"local", paginationSize: 10, columns : [ { title: "순번", field: "", minWidth: 50, .. 2022. 12. 28.
Bootstarp Datepicker 시작날짜, 끝날짜 정하기(startdate, enddate) Bootstarp Datepicker 시작날짜, 끝날짜 정하기(startdate, enddate) 시작날짜에선 끝날짜 "이전"만 선택 가능하도록 끝날짜에선 시작날짜 "이후"만 선택 가능하도록 코드는 아래와 같음 $("#start").datepicker({ format: "yyyy-mm-dd", autoclose : true, calendarWeeks : false, clearBtn : false, showWeekDays : true , todayHighlight : true , language : "kr" }).on("changeDate", function(){ $("#end").datepicker("setStartDate", new Date($("#start").val())); }); $("#end").. 2021. 10. 7.
[Tabulator] 체크박스로 행 선택 / rowSelectionChanged 콜백함수 구현 목표: 첫 번째 컬럼에 체크박스 삽입 후 체크박스로 행 선택 컨트롤 위와 같이 체크박스로 행 선택하는 건 옵션으로 간단하게 만들 수 있다. var table = new Tabulator("#example-table", { height:"311px", columns:[ {formatter:"rowSelection", titleFormatter:"rowSelection", hozAlign:"center", headerSort:false }, {title:"Name", field:"name", width:200}, {title:"Progress", field:"progress", width:100, hozAlign:"right", sorter:"number"}, {title:"Gender", field:.. 2021. 7. 27.
[Tabulator] cell & row click event 동시에! 2021.07.18 - [공부기록/JQUERY] - [Tabulator] 라이브러리 옵션들(반응형 레이아웃, 아이콘 사용) 위 포스팅에서 아이콘을 사용해서 edit, delete 기능을 구현했다. 바로 cellClick 함수를 이용해서~ 그리고 행을 클릭하면 해당 행의 상세보기 화면을 띄우는 기능을 구현하고자 했다. 이때 cellClick과 rowClick의 이벤트가 동시에 발생하는 문제를 막기 위해 다음과 같이 작성해준다. table = new Tabulator("#dic", { layout:"fitDataFill", placeholder:"데이터가 존재하지 않습니다.", columns : [ { formatter:"responsiveCollapse", width:50, minWidth:50, hozA.. 2021. 7. 20.
728x90
반응형