Ordering

Andreas S.

Hi,

I have a table that shout ordering by country. my Problem is the sorting did not work because I get following json:

{
    "data": [
        {
            "uuid": "9842667f-96c5-454b-aa58-ee689bf5d542",
            "name": "sa",
            "email": "worf@defiant.uss",
            "phone": "+4327 343 43 23 23",
            "website": "http://www.klingon.de",
            "streetAddress": "Kronos 47",
            "streetAddress2": "Moon 13",
            "location": "Kronos",
            "postalCode": "2A45B",
            "state": "Alpha Quadrant",
            "country": {
                "ioc": "USA",
                "iso3166_1_alpha2": "US",
                "iso3166_1_alpha3": "USA",
                "nameEnglish": "United States",
                "nameGerman": "United States of America"
            },
            "DT_RowId": "row_1"
        },
        {
            "uuid": "695463d0-1adf-4a86-9258-c0aac18c3bb5",
            "name": "sdf",
            "email": "troi@enterprise.uss",
            "phone": "+11 111111",
            "website": "http://www.enterprise.com",
            "streetAddress": "Romolus 2x3",
            "streetAddress2": "öäü",
            "location": "Romolus",
            "postalCode": "üöäüää",
            "state": "Delta",
            "country": {
                "ioc": "BEL",
                "iso3166_1_alpha2": "BE",
                "iso3166_1_alpha3": "BEL",
                "nameEnglish": "Belgium",
                "nameGerman": "Belgien"
            },
            "DT_RowId": "row_2"
        },
        {
            "uuid": "2087d7df-a81f-4ffa-ba78-d680580df7f0",
            "name": "Speedfish in the Universe",
            "email": "speedy@speed.com",
            "phone": "+43 664 23 23 23 42",
            "website": "http://www.speed.com",
            "streetAddress": "Hubertusdamm an der Klann 13/3/222",
            "streetAddress2": "",
            "location": "Wien",
            "postalCode": "1231",
            "state": "Wien",
            "country": {
                "ioc": "AUT",
                "iso3166_1_alpha2": "AT",
                "iso3166_1_alpha3": "AUT",
                "nameEnglish": "Austria",
                "nameGerman": "Österreich"
            },
            "DT_RowId": "row_3"
        },
    "draw": "1",
    "recordsTotal": 5,
    "recordsFiltered": 5
}

The Country is send with some additional data.

I have written following js code to show the datatable:

var clist = $('#clublst').DataTable( {
        "ajax": {
            url: 'assets/lib/adm/club_util.php?ct=1',
            type: 'POST'
        },
        "columnDefs": [
            { targets: [ 0, 1, 2, 3, 4, 11 ], visible: true },
            { targets: '_all', visible: false }
        ],
        "columns":[
            { data: "name"},
            { data: "country", width: '5%', render: function(data, type, row){
                var session_lang = '<?php echo $_SESSION["language"] ?>';
                var set_Language = (session_lang == 'de')? data.nameGerman : data.nameEnglish
                return  (data.iso3166_1_alpha2 == '')?
                    '<img title="" src="assets/images/flags/rect/24/em.png" />' :
                    '<img title="' + set_Language + '" src="assets/images/flags/rect/24/' + data.iso3166_1_alpha2 + '.png" />'
            }, className: 'text-center'},
            { data: "email"},
            { data: "phone"},
            { data: "website", render: function(data, type, row){
                return '<a href="' + data + '">' + data + '</a>'
            }},
            { data: "streetAddress"},
            { data: "streetAddress2"},
            { data: "location"},
            { data: "postalCode"},
            { data: "state"},
            { data: "uuid" },
            { data: null, render: function (data, type, row){
                    return '<a href="" class="u-edit btn btn-xs btn-default btn-quick" title="Edit" data-toggle="modal" data-target="#aClub" '
                                + 'data-js-hide-block="successAdmClub;failAdmClub;loadingAdmClub;aClubClose" data-js-show-block="formAdmClub;aClubSave" data-uuid="' + data.uuid +'">'
                                + '<i class="fa fa-pencil" style="padding-right: 0px;"></i></a>'
                }, orderable: false, width: '3%'
            }
        ],
        autoWidth: false,
        select: true,
        initComplete: function () { $('#clublst').removeClass('hidden'); }
    });
});

I know that the sorting did not know with which data the should sort. I have no idea, how can the column define the should sort by ioc code. Have someone a idea?

Andreas

allan

It sounds like you want to use orthogonal data with your columns.render function. When DataTables asks for the sort data type, return the data you want to use for ordering rather than the generated HTML.

Allan

Andreas S.

I tried this one, but it did not work. May you help me to find my fault?

            { data: "country", width: '5%', render: function(data, type, row){
                    if(type === 'display'){
                        var session_lang = '<?php echo $_SESSION["language"] ?>';
                        var set_Language = (session_lang == 'de')? data.nameGerman : data.nameEnglish
                        return  (data.iso3166_1_alpha2 == '')?
                            '<img title="" src="assets/images/flags/rect/24/em.png" />' :
                            '<img title="' + set_Language + '" src="assets/images/flags/rect/24/' + data.iso3166_1_alpha2 + '.png" />';
                    }
                    else if(type === 'filter'){
                        return data.ioc;
                    }
                    else{
                        return data;
                    }
                }, className: 'text-center'
            },

allan

That looks like it should work. Could you run the debugger if you can't post a link.

Thanks,
Allan

Andreas S.

Here is the link debug.datatables.net/omozos

Andreas

allan

Thanks.

You are using "data": "country", for the column and then return data; if it is a sorting request. However, country is an object. You might want to return data.nameGerman.

Allan

Andreas S.

Thanks it works now.