Lang/Javascript

datatables 동적

hamaganatanadda 2024. 6. 1. 14:32

chatgpt . 조금 변형해서 쓸 예정

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>DataTables 예제</title>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Korean.json"></script>
    <script>
    $(document).ready(function() {
        function getDefaultOptions() {
            return {
                paging: true,
                searching: true,
                ordering: true,
                info: true,
                autoWidth: false,
                language: {
                    url: "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Korean.json"
                }
            };
        }
 
        function createDataTable(selector, customOptions) {
            var options = getDefaultOptions();
            $.extend(options, customOptions);
            $(selector).DataTable(options);
        }
 
        // 일반 테이블 생성
        createDataTable('#myTable1', {});
 
        // 특별한 옵션이 필요한 테이블 생성
        createDataTable('#myTable2', {
            paging: false,
            order: [[1, 'asc']],
            columnDefs: [{
                targets: 0,
                visible: false
            }]
        });
 
        // 스크롤 옵션을 적용한 테이블 생성
        createDataTable('#myTable3', {
            scrollY: "200px",
            scrollCollapse: true,
            paging: false
        });
    });
    </script>
</head>
<body>
    <h1>DataTables 예제</h1>
    <table id="myTable1" class="display">
        <thead>
            <tr>
                <th>이름</th>
                <th>위치</th>
                <th>나이</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>홍길동</td>
                <td>서울</td>
                <td>30</td>
            </tr>
            <tr>
                <td>이순신</td>
                <td>부산</td>
                <td>45</td>
            </tr>
        </tbody>
    </table>
 
    <table id="myTable2" class="display">
        <thead>
            <tr>
                <th>이름</th>
                <th>위치</th>
                <th>나이</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>박문수</td>
                <td>인천</td>
                <td>25</td>
            </tr>
            <tr>
                <td>정약용</td>
                <td>대구</td>
                <td>33</td>
            </tr>
        </tbody>
    </table>
 
    <table id="myTable3" class="display">
        <thead>
            <tr>
                <th>이름</th>
                <th>위치</th>
                <th>나이</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>김유신</td>
                <td>경주</td>
                <td>51</td>
            </tr>
            <tr>
                <td>신사임당</td>
                <td>강릉</td>
                <td>42</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 

rowCallback 1,2 페이지 이동할 때마다 동작

createdRow 최초 생성시

'Lang > Javascript' 카테고리의 다른 글

소수점, 숫자, 마이너스만 입력되게 하는 방법  (0) 2025.04.13
Datatables dom으로 버튼 넣으면 줄바꿈 생길 시  (0) 2023.11.30
goolgle maps + markerwithlabel 사용 시 infoWindow가 동작하지 않을 때  (0) 2023.11.19

'Lang/Javascript'의 다른글

  • 현재글datatables 동적

관련글

티스토리툴바