datatables 수정하기

https://datatables.net/

DataTables | Table plug-in for jQuery

 

<script src="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.min.css"></script>

<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>



$(document).ready( function () {
    $('#myTable').DataTable(); <!-- myTable : 테이블 ID -->
} );

기본적으로 이렇게 사용을 한다.

페이징, 검색, 정렬 등이 기본으로 되어 있는데 사용하기 싫다면

 

"paging" : false,
"ordering" : false,
"info" : false,
"searching" : false 를 추가하면 된다.

$(document).ready( function () {
    $('#myTable').DataTable({
        "paging" : false,
        "ordering" : false,
        "info" : false,
        "searching" : false
	});
	
} );

 

나는 다른 기능들은 사용하고 싶지 않았고

보여줄 데이터 건수만 변경을 하고 싶었다

"lengthChange":true, //데이터 건수 변경 기능 사용

"pageLength":10, //기본 데이터 건수

"lengthMenu"[[10,20,50,-1],[10,20,50,'All']] 

 

* lengthMenu 에서 앞에 배열값은 실제 데이터이고 뒤에 배열은 사용자 화면에 보여지는 데이터 같았다.

또, 이 기능을 위해서는

테이블에 데이터를 뿌려줄 때

 

"ajax": function(,,){

..

} ,

"columns":[{"data":"id"},{"data":"name"}],

"columnDefs":[{"title":"id","targets":1,"orderable":flase},{"title":"name","targets":s,"orderable":flase}]

처럼 테이블 안에서 데이터를 읽어와야 기능을 쓸 수 있는 것 같다.. 

 

 

 

https://dduruddung.tistory.com/entry/%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%85%8C%EC%9D%B4%EB%B8%94-%EC%98%B5%EC%85%98%EB%93%A4

데이터테이블 옵션들