How can I change the content language of the datatables to French with jquery?

Question

can we help me to change the content language of dataTables in french with jquery? Here is my code : i wish to change the value of months in french eg : August -> Août.

I wish to change the ligne :

data: "dmdatecre",render: Datatable.render.datetime('MMMM')

To french Thanks for all

     $(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]

score 0 · Accepted Answer · answered Aug 02 '22 at 10:55

Step 1

Be sure you have moment.js and moment.js locale correctly in your head script section, i'm using 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>

Step 2

Change your column render function to this:

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

Full code

<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>

https://stackoverflow.com/questions/1026069/how-do-i-make-the-first-letter-of-a-string-uppercase-in-javascript — Dani, Aug 02 '22 at 11:14

How can I change the content language of the datatables to French with jquery?

1 Answers1

Step 1

Step 2

Output

Full code