如何使用 jquery 將數據表的內容語言更改為法語？

Question

我們可以幫我用 jquery 更改法語數據表的內容語言嗎？ 這是我的代碼：我希望更改法語月份的值，例如：August -> Août。

我想改變線：

數據：“dmdatecre”，渲染：Datatable.render.datetime('MMMM')

致法語謝謝大家

     $(document).ready(function () {
      const dmList = JSON.parse(`<?= json_encode($dm) ?>`);

      const table = $("#nj_table").DataTable({
        data: dmList,
        columns: [
          {
            data: "dmdatecre", render: DataTable.render.datetime('YYYY'),
         
         },
          {
            data: "dmdatecre",render: DataTable.render.datetime('MMMM'),
            

          },
          {
            data: "dmprenom",
          },
          {
            defaultContent: '<button type="button" class="btn btn-outline-success" id="detail">Détail</button>',
          }
          
        ],

        language: {
            url: '../../plugins/datatables/datatables:fr-FR.json'
        }

        
      }) 
[Change August to Août][1]

Answer 1

步驟1

確保你的 head 腳本部分正確地設置了moment.js和moment.js locale ，我使用的是 cdn：

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
              
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/locale/fr.min.js"></script>

第2步

將您的列渲染 function 更改為：

render: function(data, type, full) {
                  return    moment(new Date(data)).locale('en-es').format('MMMM') + " | " +
                            moment(new Date(data)).locale('fr-fr').format('MMMM');
                }

Output

完整代碼

<html>
    <head>
        <script
              src="https://code.jquery.com/jquery-3.6.0.min.js"
              integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
              crossorigin="anonymous"></script>
              
        <script
              src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
              
        <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
        
        <script
              src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
              
        <script
              src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/locale/fr.min.js"></script>
    </head>
    <body>
    
        <table id="example" class="display" style="width:100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011-04-25</td>
                    <td>$320,800</td>
                </tr>
                <tr>
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011-07-25</td>
                    <td>$170,750</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>Junior Technical Author</td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009-01-12</td>
                    <td>$86,000</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>
        </table>
    </body>
</html>
<script>

$(document).ready(function () {

    $('#example').DataTable( {
        "language": {
            url: 'https://cdn.datatables.net/plug-ins/1.11.5/i18n/fr-FR.json',
        },columnDefs: [
            {
                targets: 4,
                render: function(data, type, full) {
                  return    moment(new Date(data)).locale('en-es').format('MMMM') + " | " +
                            moment(new Date(data)).locale('fr-fr').format('MMMM');
                }   
            }
        ]
    } );
});
</script>

如何使用 jquery 將數據表的內容語言更改為法語？

問題描述

1 個解決方案

解決方案1
0 已采納 2022-08-02 10:55:12

步驟1

第2步

Output

完整代碼

如何使用 jquery 將數據表的內容語言更改為法語？

問題描述

1 個解決方案

解決方案1 0 已采納 2022-08-02 10:55:12

步驟1

第2步

Output

完整代碼

解決方案1
0 已采納 2022-08-02 10:55:12