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 getLanguages() {

$('#language li a').click(function(){
  var id = $(this).attr('id');

  if(id=='tr'){
      var lang='Tr'
          mods: {
          sLengthMenu: "Gösterilen _MENU_ Kayıt"
    }
    alert(lang);
  }
  else if(id=='en'){
     var lang='En'
          mods: {
          sLengthMenu: "Show _MENU_ Entries "
    }
     alert(lang);
}

var result = null;
  var path = '//cdn.datatables.net/plug-ins/1.10.13/i18n/';
  $.ajax({
    async: false,  
    url: path + langMap[lang].path + '.json',
    success: function(obj) {
    result = $.extend({}, obj, langMap[lang].mods)
    }
  });
  return result
  });
};
                $('#TableDT').DataTable({
                'processing': true,
                'serverSide': true,
                "lengthMenu": [[10,15, 25, 50, 10000], [10,15, 25, 50, "All"]],
                'serverMethod': 'post',
                'ajax': {
                    'url':'ajaxfile.php'
                },
                'columns': [
                    { data: 'orderno' },
                    { data: 'client' },
                    { data: 'plate' },
                ],
                language: getLanguages()                           
    });                   
});