Bootstrap Table Grid sort 처리 - Datatables

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