Web/Bootstrap

Bootstrap Table Grid sort 처리 - Datatables

saltdoll 2017. 3. 9. 02:06
반응형

Bootstrap에 사용되는 테이블을 sort처리하기


DataTables 공식사이트: https://datatables.net/


소스 설명: https://datatables.net/examples/styling/bootstrap.html

예제: https://www.datatables.net/manual/styling/bootstrap-simple.html


소스파일: 

datatables.min.css

datatables.min.js



사용시 주의 사항:

<table> 태그 안에  <thead>를 꼭 추가해 줘야 합니다.


 소스 형식

<link rel="stylesheet" type="text/css" href="/css/datatables.min.css"/>

<script type="text/javascript" src="/js/datatables.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$(
'#example').DataTable();
} );
</script> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <tr><th>Name</th><th>Position</th><th>Office</th><th>Salary</th></tr>

</thead>

<tbody>

<tr><td>Tiger Nixon</td><td>System Architect</td><td>Edinburgh</td><td>$320,800</td></tr>

</tbody>

</table>


<script type="text/javascript">
// For demo to fit into DataTables site builder...
$('#example')
.removeClass( 'display' )
.addClass('table table-striped table-bordered');
</script>


참고: http://stackoverflow.com/questions/31888566/bootstrap-how-to-sort-table-columns




!! 주의 사항 !!

Datatable을 사용하면, 상단의 Scrolling down 메뉴가 움직이지 않을때가 있다.

bootstrap.js 파일이 필요해서 일수 있다.


 datatables 와 bootstrap추가 

 bootstrap.min.js를 추가해 주면 해당 드롭다운 메뉴가 정상 작동한다.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link rel="stylesheet" type="text/css" href="/css/datatables.min.css"/>
<script type="text/javascript" src="/js/datatables.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
//$('#datatable').DataTable();
$('#datatable').dataTable( {
"lengthMenu": [ [-1, 100, 50, 25, 10], ["All", 100, 50, 25, 10] ]
} );
});
</script>

참고:  http://stackoverflow.com/questions/41455987/jquery-datatable-bootstrap-makes-dropdowns-not-working




반응형
도움이 되셨다면 하트모양의 "♡ 공감"을 눌러주시면 큰 격려가 됩니다.
(로그인하지 않으셔도 가능)