2019-12-27

참고링크: multi filter select

위의 예제에는 tfoot에 구현되어 있고, 해당 컬럼의 이름이 표시 안되어 있어서, 상단 컬럼에서 바로 selectbox로 볼 수 있으면서 컬럼명도 표시 되도록 예제를 다시 구성해 보았다.
다만, 이럴경우 상단클릭시 order가 되는 기능이 겹치기 때문에 order기능을 꺼놓았다.

<table id="example" class="display" style="width:100%">
	<tbody>
		<tr>
			<td>홍길동</td>
			<td>부장</td>
			<td>서울</td>
		</tr>
		<tr>
			<td>김도몽</td>
			<td>과장</td>
			<td>인천</td>
		</tr>
		<tr>
			<td>김길자</td>
			<td>대리</td>
			<td>대전</td>
		</tr>
		<tr>
			<td>김길동</td>
			<td>대리</td>
			<td>인천</td>
		</tr>
		<tr>
			<td>김묘량</td>
			<td>과장</td>
			<td>서울</td>
		</tr>
		<tr>
			<td>김길자</td>
			<td>대리</td>
			<td>서울</td>
		</tr>
	</tbody>
</table>

<link rel="stylesheet" href="/post_inc/datatables/jquery.dataTables.min.css">
<script src="/post_inc/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript">

var dt_columns =  [
	{ title: "이름", width:100},
	{ title: "직위", width:100},
	{ title: "사무실", width:100},
]

var example_tbl = null
$(function() {
	example_tbl = $('#example').DataTable( {
		columns:dt_columns,
		dom:"t",
		columnDefs: [
			{orderable: false, targets :[1,2]}
		],
		initComplete: function () {
			this.api().columns().every( function (e) {
				if(e==1 || e==2 ){
					var column = this;
					col_name = dt_columns[Number(this[0].toString())].title
					var select = $('<select><option value="">'+col_name+'</option></select>')
					.appendTo( $(column.header()).empty() )
					.on( 'change', function () {
						var val = $.fn.dataTable.util.escapeRegex(
							$(this).val()
						);
						column.search( val ? '^'+val+'$' : '', true, false ).draw();
					} );

					column.data().unique().sort().each( function ( d, j ) {
						select.append( '<option value="'+d+'">'+d+'</option>' )
					} );
				}
			} );
		}
	});

});
</script>