jquery tablesorter 2.0(테이블 정렬 플러그인)+스크롤사용

참고 : https://mottie.github.io/tablesorter/docs/index.html

jquery.tablesorter.min.js

widget-scroller.js

스크롤을 사용하기위해 widget-scroller.js도 사용하였다.

1. jquery와 함께 플러그인 include.

2. 스크립트 지정

$(function(){
	//테이블에 콤마가있는 숫자데이터가있어서 소팅시 콤마없애고 소팅해줘야 정확히된다.
	$.tablesorter.addParser({ 
	  // set a unique id 
	  id: 'comma', 
	  is:function(s){return false;},
	  format: function(s) {return s.replace(/[\,\.]/g,'');},
	  type: 'numeric'
	}); 
	$(".tablesorter").tablesorter({
		widthFixed: false, 
		widgets: ['zebra','scroller'],
		widgetOptions: { scroller_height: 500 },
		headers: { //5,7,8번째 컬럼에 위에 addparser사용(0부터시작)/id지정해준다.
			 5: { sorter:'comma' },
			 7: { sorter:'comma' },
			 8: { sorter:'comma' }
		}
	});
	
	//윈도우 리사이즈시 테이블 리사이즈 처리
	$(window).bind('resize', window_resize);
	$(window).bind('resizeEnd', function (e) {
		$(window).unbind('resize', window_resize);
		$('table.tablesorter').each(function(n, t) {
			 if (typeof t.resizeWidth === 'function') t.resizeWidth();
		});
		$(window).bind('resize', window_resize);
	});
});

3. 템플릿 생성

	

		

			
col1
			
col2
		
	
	

		

			
abc
			
def
		
	

* 2번에서 widgets:[] 칸에 'zebra' 를 주면 얼룩말처럼 줄이 홀/짝으로 색이바뀜

* 헤더에 화살표는 직접 css지정하여 사용;

* 스크롤 적용시 합계부분을 thead/tbody 아닌 tfoot로 하면 스크롤이 안먹음.