The empty string broke the order.

irelevant

Hello,

you know the problem about wrong sorting special foreign characters as ľščťžýáíé... Solution is $.fn.dataTable.ext.order.intl('sk');. Everything with this works great. BUT. When I tried sorted empty string with other string with special foreign characters order 'sk' dont work anymore. Probably again en-us or en-gb. I dont know why. here is my initialisation and scripting definitions.

$.fn.dataTable.ext.order.intl('sk');
var table = $('#myTable').DataTable({
    columnDefs: [{
            orderable: true,
            targets: 0
        },
        {
            orderable: true,
            targets: 1
        },
        {
            orderable: true,
            targets: 2
        },
        {
            orderable: true,
            targets: 3
        },
        {
            orderable: false,
            targets: 4
        }
    ],
    oLanguage: {
        oAria: {
            "sSortAscending": "Usporiadať vzostupne",
            "sSortDescending": "Usporiadať zostupne"
        },
        oPaginate: {
            "sFirst": "Prvá strana",
            "sLast": "Posledná strana",
            "sNext": ">",
            "sPrevious": "<"
        },
        sEmptyTable: "Žiadne zaznamenané kontakty",
        sInfo: "Zobrazené od _START_ po _END_ z celkového počtu _TOTAL_",
        sInfoEmpty: "Žiadne zaznamenané kontakty",
        sInfoFiltered: "(vyfiltrované z _MAX_ všetkých kontaktov)",
        sLengthMenu: "Zobraziť _MENU_ kontaktov na stranu",
        sLoadingRecords: "Prosím počkajte - načítavam...",
        sProcessing: "Spracúvam údaje",
        sSearch: "Vyhľadať:",
        sZeroRecords: "Žiadne zaznamenané kontakty",
    },
    dom: "<'row'<'col-sm-4'l><'col-sm-4 toolbar'><'col-sm-4'f>>" +
        "<'row'<'col-sm-12'tr>>" +
        "<'row'<'col-sm-5'i><'col-sm-7'p>>",
    aLengthMenu: [
        [10, 25, 50, 100, -1],
        [10, 25, 50, 100, "Všetky"]
    ],
    "paging": false,
    "ordering": true,
    "info": true,
    "stateSave": false,
    "searching": true
});
$(".filterhead").each(function(i) {
    if (i == 2 || i == 3) {
        var select = $('<select><option value=""></option></select>')
            .appendTo($(this).empty())
            .on('change', function() {
                var term = $(this).val();
                table.column(i).search(term, false, false).draw();
            });
        table.column(i).data().unique().sort().each(function(d, j) {
            select.append('<option value="' + d + '">' + d + '</option>')
        });
    }
});
new $.fn.dataTable.FixedHeader(table);

This is scripts what my application using:

<!-- JS Global Compulsory -->
    <script src="~/assets/vendor/jquery/jquery.js"></script>
    <script src="~/assets/vendor/jquery-migrate/jquery-migrate.min.js"></script>
    <script src="~/assets/vendor/jquery.easing/js/jquery.easing.js"></script>
    <script src="~/assets/vendor/popper.min.js"></script>
    <script src="~/assets/vendor/bootstrap/bootstrap.js"></script>
    <!-- JS Implementing Plugins -->
    <script src="~/assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
    <script src="~/assets/vendor/appear.js"></script>
    <!-- JS Unify -->
    <script src="~/assets/js/hs.core.js"></script>
    <script src="~/assets/js/components/hs.header.js"></script>
    <script src="~/assets/js/helpers/hs.hamburgers.js"></script>
    <script src="~/assets/js/components/hs.scroll-nav.js"></script>
    <script src="~/assets/js/components/hs.go-to.js"></script>
    <script src="~/assets/js/helpers/hs.height-calc.js"></script>
    <script src="~/assets/js/components/hs.carousel.js"></script>
    <!-- JS Custom -->
    <script src="~/assets/js/custom.js"></script>
    <!-- JS Master Slider -->
    <script src="~/assets/vendor/master-slider/source/assets/js/masterslider.min.js"></script>
    <!-- JS Implementing Plugins -->
    <script src="~/assets/vendor/jquery.maskedinput/src/jquery.maskedinput.js"></script>
    <script src="~/assets/vendor/masonry/dist/masonry.pkgd.min.js"></script>
    <script src="~/assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
    <script src="~/assets/vendor/slick-carousel/slick/slick.js"></script>
    <script src="~/assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
    <script src="~/assets/js/components/hs.sticky-block.js"></script>
    <script src="~/assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
    <script src="~/assets/vendor/dzsparallaxer/dzsscroller/scroller.js"></script>
    <script src="~/assets/vendor/dzsparallaxer/advancedscroller/plugin.js"></script>
    <script src="~/assets/vendor/jquery.filer/js/jquery.filer.min.js"></script>
    <!-- jQuery UI Core -->
    <script src="~/assets/vendor/jquery-ui/ui/jquery.form.js"></script>
    <script src="~/assets/vendor/jquery-ui/ui/widget.js"></script>
    <script src="~/assets/vendor/jquery-ui/ui/version.js"></script>
    <script src="~/assets/vendor/jquery-ui/ui/keycode.js"></script>
    <script src="~/assets/vendor/jquery-ui/ui/position.js"></script>
    <script src="~/assets/vendor/jquery-ui/ui/unique-id.js"></script>
    <script src="~/assets/vendor/jquery-ui/ui/safe-active-element.js"></script>
    <!-- jQuery UI Helpers -->
    <script src="~/assets/vendor/jquery-ui/ui/widgets/menu.js"></script>
    <script src="~/assets/vendor/jquery-ui/ui/widgets/mouse.js"></script>
    <!-- jQuery UI Widgets -->
    <script src="~/assets/vendor/jquery-ui/ui/widgets/datepicker.js"></script>
    <!-- JS Unify -->
    <script src="~/assets/js/components/hs.masked-input.js"></script>
    <script src="~/assets/js/components/hs.datepicker.js"></script>
    <script src="~/assets/js/helpers/hs.focus-state.js"></script>
    <script src="~/assets/js/components/hs.file-attachement.js"></script>
    <!-- full calendar -->
    <script src="~/fullcalendar/lib/moment.min.js"></script>
    <script src="~/fullcalendar/fullcalendar.js"></script>
    <script src="~/fullcalendar/locale/sk.js"></script>
    <!-- dataTables -->
    <script src="~/js/datatables.js"></script>
    <script src="~/js/dataTables.fixedHeader.min.js"></script>
    <script src="~/js/intl.js"></script>

Thank you for any advice. If you need more details about problem or code, jsut tell me

colin

Hi @irelevant ,

That's a lot of with lots going on there. We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

irelevant

Sorry for late response. There it is: http://live.datatables.net/qipasuma/1/edit?html,js,output
Problem is in empty string Name. When I deleted empty name or write something to it everything work good. I think Č is sorted good, BUT not with empty string Name as you can see.

allan

For some reason (I haven't checked yet, but will do) DataTables is picking up the column has HTML formatted when there is an empty string as a value. That's a little different from the plain string sort, thus the issue.

Here is a workaround: http://live.datatables.net/qipasuma/3/edit .

Allan

allan

Quick follow up - its this empty check that is causing the issue. That is there to allow HTML columns to be empty.

I think this is going to need to be restructured a little. With v2 I plan to have the Intl API built into DataTables core (although not required for older browsers - they'll end up with a different sort!) and I will look into this at that point. It is correct that HTML type should allow locale specific sorting as well, it needs to integrate a little better.

Allan