본문 바로가기

HTML & CSS & JS

datatable maintain scroll

반응형

table order 등의 작업 후에 스크롤 reset되는 현상 방지

	"preDrawCallback": function (settings) {
	        pageScrollPos = $('div.dataTables_scrollBody').scrollTop();
	    },
	    "drawCallback": function (settings) {
	        $('div.dataTables_scrollBody').scrollTop(pageScrollPos);
	    },

두 옵션을 datatable안에 삽입.

 

$('#showTable').DataTable({"autoWidth": false ,
		"paging":false,
		info:false,scrollX: true
		,scrollY: "600px",
		order: [[0, 'desc']], 
		ordering: true,
		searching:true,
		"preDrawCallback": function (settings) {
	        pageScrollPos = $('div.dataTables_scrollBody').scrollTop();
	    },
	    "drawCallback": function (settings) {
	        $('div.dataTables_scrollBody').scrollTop(pageScrollPos);
	    },
		"columns": [
   		{ "width": "45%" },
    	{ "width": "45%" },
		{ "width": "45%" },
		{ "width": "15%" },
    	{ "width": "10%" }
  	]});

예시

반응형

'HTML & CSS & JS' 카테고리의 다른 글

ajaxStart, ajaxStop  (0) 2021.08.27
CSS cursor 지정  (0) 2021.08.05
dataTable scroll  (0) 2021.07.02
javascript modal control  (0) 2021.07.02
jquery checkbox  (0) 2021.07.01