[javascript] DataTables에서 행을 드래그하여 재정렬하는 방법은 무엇인가요?

30 Nov 2023

javascript

DataTable에서 행을 드래그하여 재정렬하는 방법은 간단합니다. DataTables에서는 rowReorder 플러그인을 사용하여 이 기능을 지원합니다.

먼저 DataTables와 rowReorder 플러그인을 CDN을 통해 로드하고, 테이블을 초기화해야 합니다:

<!DOCTYPE html>
<html>
<head>
    <title>DataTable 행 재정렬</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
</head>
<body>
    <table id="myTable" class="display">
        <thead>
            <tr>
                <th>이름</th>
                <th>나이</th>
                <th>직업</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John</td>
                <td>25</td>
                <td>개발자</td>
            </tr>
            <tr>
                <td>Mary</td>
                <td>30</td>
                <td>디자이너</td>
            </tr>
            <!-- 추가 행들 -->
        </tbody>
    </table>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/rowreorder/1.2.8/js/dataTables.rowReorder.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#myTable').DataTable({
                rowReorder: {
                    selector: 'td:first-child',
                    update: true
                }
            });
        });
    </script>
</body>
</html>

위 코드에서 rowReorder 플러그인의 설정 부분에서 selector 속성은 드래그로 이동할 대상을 선택하는 데 사용됩니다. 위의 예시에서는 첫 번째 열의 테이블 데이터 셀로 설정되었습니다. update 속성은 행의 위치가 변경될 때 DataTables에게 업데이트 할 것인지를 나타냅니다.

이제 위의 예시를 실행하면 DataTables가 초기화되고 행을 드래그하여 재정렬할 수 있게 됩니다.