DataTables 커스텀 중 코드

2021년 11월 19일 18시 59분 59초에 업로드 된 글입니다.

작성자: 원2

728x90

<%--
  Created by IntelliJ IDEA.
  User: everitime
  Date: 2021-11-18
  Time: 오후 2:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
    <link type="text/css" rel="stylesheet" href="/css/bootstrap.css">
    <link/>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <%--    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>--%>
</head>
<body>
<div class="container">
    <div class="jumbotron text-center">
        <h3>반갑다 데이터테이블아 ㅋ</h3>
    </div>
    <table class="table table-hover stripe" id="testTable">
        <thead class="thead-dark">
        <tr>
            <th>num</th>
            <th>title</th>
            <th>content</th>
            <th>id</th>
            <th>date</th>
            <th>hit</th>
        </tr>
        </thead>
    </table>
</div>
</body>
<script>
    $(document).ready(function () {
        $('#testTable').DataTable({

            processing: true,
            severSide: true,

            ajax: {
                url: '/dataTablesData',
                dataSrc: ''
            },

            language: {
                search: "검색해보거라 : ",
                zeroRecords: "일치하는 데이터가 없어요...",
                info: "현재 _START_ - _END_ / 총 _TOTAL_건",
                lengthMenu: "한 페이지당 _MENU_ 개씩 보기",
                paginate: {
                    next: "다음",
                    previous: "이전",
                },
            },

            //각각의 열의 클래스명을 수정할 수 있다. 근데 0,0 자리 테이블 헤드까지 잡아먹는다...
            columns: [

                {
                    data: "num",
                    className: "table-active"
                },
                {data: "title"},
                {data: "content"},
                {data: "id"},
                {data: "date"},
                {data: "hit"}

            ]

            // //한 열의 전체를 수정
            // columnDefs: [
            //     {className: "table-success", targets: [ 1, 1 ]}
            // ]

        });
    });
</script>
<%--<script>--%>
<%--    $(document).ready( function () {--%>
<%--        $('#testTables').DataTable();--%>
<%--    });--%>

<%--</script>--%>
</html>

728x90

저작자표시 (새창열림)

'Library > DataTables' 카테고리의 다른 글

DataTables select option (multi) (0)	2021.11.23
DataTables 빈 컬럼 생성 후 체크박스 만들기 (0)	2021.11.23
DataTables dom, Customizing the default menu (0)	2021.11.22
DataTables 커스텀 참고용 (0)	2021.11.19
DataTables 기본 생성 (0)	2021.11.19
datatables 기초 (0)	2021.11.19

다음글이 없습니다.

이전글이 없습니다.

'Library > DataTables' 카테고리의 다른 글

티스토리툴바