Table sort with eastern Europe characters

Topic: Table sort with eastern Europe characters

Macek asked 6 years ago

Hi,

I use table sort and it works just great but unfortunately not for special czech characters (á,č,ď,ě,é,í,ň,ó,ř,š,ť,ů,ú,ý,ž). For example "č" should be between "c" and "d". How can I fix that?

See my html code attached.

<!DOCTYPE html>
<html lang="cs"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Required meta tags always come first -->

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="Typy pokojů">
<meta name="copyright" content="ILDAM sro">

<!-- Icon -->
<link rel="shortcut icon" href="https://www.stafle.cz/appl4/img/eStafle.ico">

<title>Typy pokojů</title>

<!-- Bootstrap core CSS -->
<link href="./roomtypes_files/bootstrap.min.css" rel="stylesheet">

<!-- Material Design Bootstrap -->
<link href="./roomtypes_files/mdb.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="./roomtypes_files/style.min.css" rel="stylesheet">

<!-- Java Scripts at the end!!! -->

<style type="text/css">/* Chart.js */
@-webkit-keyframes chartjs-render-animation{from{opacity:0.99}to{opacity:1}}@keyframes chartjs-render-animation{from{opacity:0.99}to{opacity:1}}.chartjs-render-monitor{-webkit-animation:chartjs-render-animation 0.001s;animation:chartjs-render-animation 0.001s;}</style></head>

<body aria-busy="true">
<div id="dtBrowseData_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer"><div class="row"><div class="col-sm-12 col-md-6"><div class="dataTables_length d-flex flex-row" id="dtBrowseData_length"><div class="pnlBrowseDataButtons">
<button type="button" class="btn btn-outline-primary btn-rounded waves-effect btn-sm dma-add-button" action-link="?WzNd">Nový</button><button type="button" class="btn btn-outline-primary btn-rounded waves-effect btn-sm dma-add-button" action-link="?WzVd">Tisk</button><button type="button" class="btn btn-outline-info btn-rounded waves-effect btn-sm" onclick="open_help(&#39;help_cs.html#roomtypes&#39;,&#39;Nápověda&#39;);">Nápověda</button></div></div></div><div class="col-sm-12 col-md-6"><div id="dtBrowseData_filter" class="dataTables_filter md-form"><input type="search" class="form-control" placeholder="Hledat" aria-controls="dtBrowseData"></div></div></div><div class="row"><div class="col-sm-12"><table id="dtBrowseData" class="table table-sm table-condensed table-hover dataTable no-footer" cellspacing="0" width="100%" role="grid" style="width: 100%;">
<thead><tr role="row"><th class="sorting" tabindex="0" aria-controls="dtBrowseData" rowspan="1" colspan="1" aria-label="ID: activate to sort column ascending" style="width: 254.4px;">ID<i class="fa fa-sort float-right" aria-hidden="true"></i></th><th class="sorting_asc" tabindex="0" aria-controls="dtBrowseData" rowspan="1" colspan="1" aria-label="Typ pokoje: activate to sort column descending" style="width: 1305.4px;" aria-sort="ascending">Typ pokoje<i class="fa fa-sort float-right" aria-hidden="true"></i></th><th style="width: 299.4px;" class="sorting" tabindex="0" aria-controls="dtBrowseData" rowspan="1" colspan="1" aria-label="Akce: activate to sort column ascending">Akce</th></tr></thead>
<tbody>







<tr edit-link="?eyIwIjoyLCJLWSI6IkR2b3UifQXX" role="row" class="odd"><td class="">Dvou</td><td class="sorting_1">Dvoulůžkový pokoj</td><td><img class="dma-delete-button-disabled" title="Nelze smazat, protože se používá"></td></tr><tr edit-link="?eyIwIjoyLCJLWSI6IkJleiJ9" role="row" class="even"><td class="">Bez</td><td class="sorting_1">Dvoulůžkový pokoj bez WC</td><td><img class="dma-delete-button-disabled" title="Nelze smazat, protože se používá"></td></tr><tr edit-link="?eyIwIjoyLCJLWSI6Ikt1ayJ9" role="row" class="odd"><td class="">Kuk</td><td class="sorting_1">Kukanec</td><td><img class="dma-delete-button" title="Smazat" delete-link="?eyIwIjo0LCJLWSI6Ikt1ayJ9"></td></tr><tr edit-link="?eyIwIjoyLCJLWSI6IlgifQXX" role="row" class="even"><td class="">X</td><td class="sorting_1">Výchozí</td><td><img class="dma-delete-button" title="Smazat" delete-link="?eyIwIjo0LCJLWSI6IlgifQXX"></td></tr><tr edit-link="?eyIwIjoyLCJLWSI6Ilx1MDEwY3RA%3DHUwMTUAIn0X" role="row" class="odd"><td class="">Čtyř</td><td class="sorting_1">Čtyřlůžkový apartmán</td><td><img class="dma-delete-button-disabled" title="Nelze smazat, protože se používá"></td></tr></tbody> </table></div></div><div class="row"><div class="col-sm-12 col-md-5"></div><div class="col-sm-12 col-md-7"><div class="dataTables_paginate paging_simple_numbers" id="dtBrowseData_paginate"><ul class="pagination"><li class="paginate_button page-item previous disabled" id="dtBrowseData_previous"><a href="https://www.stafle.cz/appl4/mng4.0/mng_udc_roomtypes.php?#" aria-controls="dtBrowseData" data-dt-idx="0" tabindex="0" class="page-link">&lt;&lt;</a></li><li class="paginate_button page-item active"><a href="https://www.stafle.cz/appl4/mng4.0/mng_udc_roomtypes.php?#" aria-controls="dtBrowseData" data-dt-idx="1" tabindex="0" class="page-link">1</a></li><li class="paginate_button page-item next disabled" id="dtBrowseData_next"><a href="https://www.stafle.cz/appl4/mng4.0/mng_udc_roomtypes.php?#" aria-controls="dtBrowseData" data-dt-idx="2" tabindex="0" class="page-link">&gt;&gt;</a></li></ul></div></div></div></div>

<!--Modal: Confirm Delete Form -->
<div class="modal fade" id="modalConfirmDelete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm modal-notify modal-danger" role="document">
<div class="modal-content text-center">
<!--Modal form header-->
<div class="modal-header d-flex justify-content-center">
<p class="heading">Opravdu smazat?</p>
</div>

<!--Modal form Body-->
<div class="modal-body">
<i class="fa fa-times fa-4x animated rotateIn"></i>
</div>

<!--Modal form Footer-->
<div class="modal-footer flex-center">
<a href="https://www.stafle.cz/appl4/mng4.0/mng_udc_roomtypes.php?#" class="btn btn-outline-danger dma-delete-yes waves-effect waves-light">Ano</a>
<a type="button" class="btn btn-danger waves-effect" data-dismiss="modal">Ne</a>
</div>
</div>
</div>
</div>
<!--End of modal form to confirm delete -->



<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="./roomtypes_files/jquery-3.3.1.min.js.download"></script>

<!-- Tooltips -->
<script type="text/javascript" src="./roomtypes_files/popper.min.js.download"></script>

<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="./roomtypes_files/bootstrap.min.js.download"></script>

<!-- MDB core JavaScript -->
<script type="text/javascript" src="./roomtypes_files/mdb.min.js.download"></script><div class="hiddendiv common"></div>

<!-- JQuery for data tables -->
<script type="text/javascript" src="./roomtypes_files/datatables.min.js.download"></script>

<!-- Some translations for JavaScripts (Calendar etc.) -->
<script type="text/javascript" src="./roomtypes_files/cs.js.download"></script>

<script type="text/javascript"><!--
$(document).ready(function () {
$('#dtBrowseData').DataTable({
"pagingType" : "simple_numbers",
"info" : false,
"language": {
"searchPlaceholder": "Hledat",
"paginate": {
"next": "&gt;&gt;",
"previous": "&lt;&lt;",
},
"emptyTable": "Nenalezeny žádné záznamy",
}
});
$('#dtBrowseData_wrapper').find('label').each(function () {
$(this).parent().append($(this).children());
});
$('#dtBrowseData_wrapper .dataTables_filter').find('input').each(function () {
$('input').removeClass('form-control-sm');
});
$('#dtBrowseData_wrapper .dataTables_length').addClass('d-flex flex-row');
$('#dtBrowseData_wrapper .dataTables_filter').addClass('md-form');
$('#dtBrowseData_wrapper select').removeClass('custom-select custom-select-sm form-control form-control-sm');
$('#dtBrowseData_wrapper select').addClass('mdb-select');
$('#dtBrowseData_wrapper .mdb-select').material_select();
$('#dtBrowseData_wrapper .dataTables_filter').find('label').remove();
$('#dtBrowseData_wrapper .dataTables_length').find('label').remove();
$('#dtBrowseData_wrapper .dataTables_length').find('div').remove();
$('.pnlBrowseDataButtons').appendTo('#dtBrowseData_wrapper .dataTables_length');
});
var delete_link = "";
$('#modalConfirmDelete').on('hidden.bs.modal', function (e) {
})
$('#modalConfirmDelete .dma-delete-yes').click(function() {
$('#modalConfirmDelete').modal('hide');
if (delete_link!="")
window.location.href = delete_link;
return false;
});
$("#dtBrowseData tbody tr .dma-delete-button").click(function() {
var link = $(this).attr("delete-link");
if (link!="")
{
delete_link = link;
$('#modalConfirmDelete').modal();
}
return false;
});
$("#dtBrowseData tbody tr").click(function() {
var link = $(this).attr("edit-link");
if ((link) && (link!="")) window.location.href = link;
});
$(".dma-add-button").click(function() {
var link = $(this).attr("action-link");
if ((link) && (link!="")) window.location.href = link;
});
// -->
</script>





</body></html>

Add comment

Piotr Glejzer staff answered 6 years ago

1 0 Best answer

Oh ok, I'm so sorry about that misunderstanding. Did you try that example?

https://cdn.datatables.net/plug-ins/1.10.19/sorting/czech-string.js

$('#example').dataTable( {

     columnDefs: [

       { type: 'czech', targets: 0 }

     ]

  } );

Add comment

Piotr Glejzer staff answered 6 years ago

0 1 Best answer

Hi,

Did you try to use a meta tag:

<meta charset="utf-8">

I copied and pasted your code and I see your language special characters.

Best,

Piotr

Add comment

David Macek answered 6 years ago

0 0 Best answer

No, Piotr, that does not solve anything. My problem is not that it does not display czech characters but that it does not SORT correctly alphabetically. Looks like this could be the solution but I don't know if this is already somehow incorporated into mdbootstrap.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator

Add comment

David Macek pro answered 6 years ago