Bootstrap datatable update

datatable이 업데이트 되어서 기존 방식으로 적용이 힘들 수 있음.

 

아래와 같이 CSS, JS 설치하고 

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
  
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>

 

 

HTML

<table id = "showTable" class="table table-striped table-bordered" style="width:100%">
						<thead>
							<tr>
								<td id ="tableHd">자주 사용되는 키워드</td>
								<td id ="tableHd">Action</td>
							</tr>
						</thead>
						<tbody>
							<tr th:each="keyword:${keywordList}">
								<td style ="width : 800px" id ="tableTd" th:text="${keyword.name}"></td>
								<td style ="width : 800px" id ="tableTd">
									<i class="fa fa-edit fa-2x mr-4" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Modify"></i>
									<i class="fa fa-trash fa-2x ml-4" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Delete"></i>
								</td>
							</tr>
						</tbody>
</table>

 

테이블의 너비가 축소되는 것은 td에 직접 width 지정하는 것으로 해결 가능

 

JS

$(document).ready(function(){
	
	
	$('#showTable').dataTable( { "autoWidth": false } );
	
	
		
		
		
});