YUI datatable-sort not working

Question

Hello I'm parsing some data from my database into a table using aui-datatable plugin however I would like to add some basic sorting in my columns. Bellow you may see the function "renderProducts" which renders the data-table. Furthermore bellow is a sample column object that is being passed into the table renderer.

var API= (function(Y){

    var settings = {
        serviceURL : null
    };

    var getServiceAttribute = function( attribute ) {
        return '_openpimadmin_WAR_OpenTest_' + attribute;
    }

    var getServiceURL = function( service ) {

        return settings.serviceURL + '&p_p_resource_id=' + service;
    };

    var service = function( service, dataSet, handlers ){

        var serviceData = {};
        var serviceHandlers = {
                start   : function(){},
                success : function(){},
                failure : function(){},
                end     : function(){}
        };

        for (prop in dataSet) {
            serviceData[getServiceAttribute(prop)] = dataSet[prop];
        }

        for (prop in handlers) {
            if ( serviceHandlers.hasOwnProperty(prop) && typeof handlers[prop] === 'function') {
                serviceHandlers[prop] = handlers[prop];
            }
        }

        Y.io(
            getServiceURL( service ), 
            {
                method : 'POST',
                data : serviceData,
                on : {
                    start : function( transactionID ) {
                        serviceHandlers.start(transactionID);
                    },
                    success : function( transactionID, response ) {

                        var parsed = Y.JSON.parse(response.responseText);

                        if (parsed.success === true){
                            serviceHandlers.success( transactionID, parsed );
                        } else {
                            console.log('Service [' + service + '] error: ' + parsed.error);
                        }

                    },
                    failure : function( transactionID, response ) {
                        serviceHandlers.failure( transactionID, response );
                    },
                    end : function( transactionID ) {
                        serviceHandlers.end( transactionID );
                    }
                }
            }
        );

    }

    return {

        services : {

            getProducts : function( dataSet, handlers ){
                dataSet = dataSet || {};
                handlers = handlers || {};
                service( 'getProducts', dataSet, handlers );
            },

            getProductsTableAttributeHeaders : function( dataSet, handlers) {
                dataSet = dataSet || {};
                handlers = handlers || {};
                service( 'getProductsTableAttributeHeaders', dataSet, handlers );
            },

        },

        views : {

            renderProducts : function( el, columns, dataSet ) {

                Y.one(el).get('childNodes').remove();

                new Y.DataTable.Base({
                    columnset : columns,
                    recordset : dataSet,
                    width: '100%'
                }).render(el);
            }

        },


        get : function( prop ) {
            return settings[prop];
        },

        set : function( options ) {
            settings = Y.merge( settings, options );
        }
    };

})( YUI().use('node', 'io', 'aui-datatable', 'datatable-sort', function(Y){return Y;}) );

Column object:

Object {key: "name", label: "Όνομα", allowHTML: true, emptyCellValue: "<em>(not set)</em>", sortable: true}

The issue I'm facing is that sorting is nowhere to be seen, columns dont seem interactive and the user is not able to sort them, although the table is being rendered fine.

Thank you in advance.

PS: I'm new to YUI().

score 0 · Answer 1 · answered May 20 '14 at 10:59

0

You need to make sure that sortable: true set for column that need sorting.

Here is a real world example with sorting feature

answered May 20 '14 at 10:59

Haris

1,131
7
20

I have check the column object in the original post. – 0x_Anakin May 20 '14 at 11:14
1

If you observe in the link that I have provided, Y.DataTable.Base is not used when sorting feature required. You need to change to same as in example, i.e. to use new Y.DataTable( { columns: nestedCols, ... – Haris May 20 '14 at 11:16

score 0 · Accepted Answer · answered May 20 '14 at 11:15

It seems this was the problem:

new Y.DataTable.Base({
                    columnset : columns,
                    recordset : dataSet,
                    width: '100%'
                }).render(el);

Should have been like this:

new Y.DataTable({
                    columnset : columns,
                    recordset : dataSet,
                    width: '100%'
                }).render(el);

YUI datatable-sort not working

2 Answers2