JSFiddle - React, Tailwind, and code Playground

by isosio

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap.min.js"></script>

     <center>
      <ul class="nav navbar-nav navbar-right">
         <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" id="drop-yazi" href="#"> <i class="fas fa-globe"></i> <span key=1> Languages</span><span class="caret"></span></a>
          <ul class="dropdown-menu" id="language">
            <li><a href="#" class="dropdown-item"  id="tr">Türkçe</a></li>
            <li><a href="#" class="dropdown-item" id="en">English</a></li>
          </ul>
        </li>

      </ul>
</center>
 <div class="row">
            <!-- Table -->
            <table id='TableDT' class='table table-bordered table-striped' style="width: 100%" data-order='[[ 0, "desc" ]]' data-page-length='15'>
                <thead>
                <tr>
                    <th><span key=2501>Order No</span></th>
                    <th><span key=2502>Client</span></th>
                    <th><span key=2503>Plate</span></th>
                </tr>
                </thead>
                
            </table>
        </div>

JavaScript

$(document).ready(function() {
    // var langMap = {
    //     En: {
    //         path: 'English'
    //     },

    //     Tr: {
    //         path: 'Turkish'
    //     }
    // };
    function initialiseTable(lang) {

        $('#empTable').DataTable({
            'processing': true,
            'serverSide': true,

            "lengthMenu": [
                [10, 15, 25, 50, 10000],
                [10, 15, 25, 50, "All"]
            ],
            'serverMethod': 'post',
                'ajax': {
                'url':'ajaxfile.php'
                },
            destroy: true,

            'columns': [{
                    data: 'orderno'
                },
                {
                    data: 'client'
                },
                {
                    data: 'plate'
                },
                {
                    data: 'carrier'
                },
                {
                    data: 'operator'
                },
            ],
            language: {
                url: "//cdn.datatables.net/plug-ins/1.10.22/i18n/" + lang + ".json"
            }
        });
    }

    $('#language li a').click(function() {

        var id = $(this).attr('id');
        console.log(id)
        var lang = "";

        if (id == 'tr') {

           lang = "Turkish";
        } else  {

            var lang = "English";
        }

            initialiseTable(lang);

    });


    initialiseTable("English");

});