datatables cdn 사용 코드

 

datatables 라이브러리를 이용해 테이블 페이징처리, 검색어 기능 등 한번에 사용이 가능하다. 

ui 는 여러가지가 잇고 선택할 수 있으며 아래 코드는 내가 자주사용하는 cdn 내용을 정리해 둔것이다. 

여러가지 섞어쓰면 sorting 할 때 버튼이 여러개가 나오거나

페이징 처리의 ui 가 이상하게 나오거나 하기 때문이다. 

 

 

    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <!-- css files for DataTables -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css"/>

    <!-- javascript files for DataTables & Plugins -->
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap4.min.js"></script>

 

header 부분에 위의 내용을 넣고 테이블을 생성하면 아래와 같이 테이블이 만들어졌다.