jQuery datatables multilingual

Toggle class name on click in jQuery

by Seetpal Singh

HTML

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap.min.css">
<table id="example" class="display" style="width:100%">

  <thead>
    <tr role="row">
      <th class="orderColumn sorting_asc" tabindex="0" aria-controls="jq-datatables" rowspan="1" colspan="1" style="width: 42px;" aria-label="Status: activate to sort column descending" data-column-index="2" aria-sort="ascending">Status</th>
      <th class="orderColumn sorting_asc" tabindex="0" aria-controls="jq-datatables" rowspan="1" colspan="1" style="width: 61px;" aria-label="Kenteken: activate to sort column ascending" data-column-index="3">Kenteken</th>
      <th class="sorting" tabindex="0" aria-controls="jq-datatables" rowspan="1" colspan="1" style="width: 142px;" aria-label="Entiteit test: activate to sort column ascending" data-column-index="4">Entiteit test</th>
      <th class="sorting" tabindex="0" aria-controls="jq-datatables" rowspan="1" colspan="1" style="width: 201px;" aria-label="Kostenplaats: activate to sort column ascending" data-column-index="5">Kostenplaats</th>
      <th class="sorting" tabindex="0" aria-controls="jq-datatables" rowspan="1" colspan="1" style="width: 21px;" aria-label="kp3: activate to sort column ascending" data-column-index="6">kp3</th>
      <th class="editRemoveCol sorting" tabindex="0" aria-controls="jq-datatables" rowspan="1" colspan="1" style="width: 125px;" aria-label="Personeelsnummer: activate to sort column ascending" data-column-index="10">Personeelsnummer</th>
      <th class="sorting" tabindex="0" aria-controls="jq-datatables" rowspan="1" colspan="1" style="width: 113px;"...

JavaScript

$('#example').DataTable({
  "language": {
    "url": "https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Dutch.json"
  }
});


/*

	ref links

	https://datatables.net/examples/styling/bootstrap.html
  
	https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Dutch.json
  
	https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/ 

*/