[javascript] DataTables에서 다국어 지원 설정하는 방법은 무엇인가요?

30 Nov 2023

javascript

DataTables는 다국어 지원을 위해 i18n 기능을 제공합니다. 다음은 DataTables에서 다국어 설정을 하는 방법입니다:

DataTables 사이트에서 원하는 언어의 i18n 파일을 다운로드합니다. 다운로드 링크: https://datatables.net/plug-ins/i18n/
다운로드한 i18n 파일을 웹 애플리케이션의 적절한 위치에 저장합니다. 예를 들어, js 폴더 내에 languages 폴더를 생성하고 i18n 파일을 그 안에 저장할 수 있습니다.
HTML 페이지에서 DataTables를 초기화하고 다국어 설정을 적용합니다. 다음은 간단한 예제입니다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>DataTables 다국어 설정</title>
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
</head>
<body>
    <table id="example">
        <thead>
            <tr>
                <th>이름</th>
                <th>나이</th>
                <th>이메일</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>홍길동</td>
                <td>30</td>
                <td>honggildong@example.com</td>
            </tr>
            <!-- 이하 생략 -->
        </tbody>
    </table>

    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
    <!-- i18n 파일 -->
    <script src="js/languages/dataTables.korean.lang.js"></script>
    <script>
        $(document).ready(function() {
            $('#example').DataTable({
                language: {
                    url: "//cdn.datatables.net/plug-ins/1.10.25/i18n/Korean.json"
                }
            });
        });
    </script>
</body>
</html>

위 예제에서 중요한 부분은 language 객체입니다. url 속성을 설정하여 해당 언어의 i18n 파일을 로드하고, 다국어 설정을 적용할 수 있습니다. url 속성은 i18n 파일의 경로를 지정해야 합니다.

위 예제에서는 한국어(Korean.json)를 사용하기 위해 url 속성에 “//cdn.datatables.net/plug-ins/1.10.25/i18n/Korean.json”을 설정하였습니다. 원하는 언어에 해당하는 경로를 정확히 지정해주세요.

이렇게 DataTables에서 다국어 설정을 할 수 있습니다. DataTables는 다양한 언어의 i18n 파일을 제공하므로 필요한 언어에 맞는 i18n 파일을 다운로드하여 적용하면 됩니다.

참조:

DataTables i18n 파일 다운로드: https://datatables.net/plug-ins/i18n/
DataTables 다국어 설정 가이드: https://datatables.net/examples/basic_init/language.html