JSFiddle - React, Tailwind, and code Playground
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) {
$('#TableDT').DataTable({
"lengthMenu": [
[10, 15, 25, 50, 10000],
[10, 15, 25, 50, "All"]
],
destroy: true,
'columns': [{
data: 'orderno'
},
{
data: 'client'
},
{
data: 'plate'
},
],
language: {
url: "//cdn.datatables.net/plug-ins/i18n/" + lang + ".json"
}
});
}
$('#language li a').click(function() {
var id = $(this).attr('id');
console.log(id)
var lang = "";
if (id == 'tr') {
/* var lang='Tr'
mods: {
sLengthMenu: "Gösterilen _MENU_ Kayıt"
}
alert(lang); */
lang = "Turkish";
} else {
/* var lang='En'
mods: {
sLengthMenu: "Show _MENU_ Entries "
}
alert(lang); */
var lang = "English";
}
initialiseTable(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)
initialiseTable();
}
});
return result
}); */
});
initialiseTable("English");
});