javascript - YUI 数据表排序不起作用

Question

您好，我正在使用 aui-datatable 插件将一些数据从我的数据库解析到一个表中，但是我想在我的列中添加一些基本的排序。下面您可能会看到呈现数据表的函数“renderProducts”。此外，下面是一个示例列对象，它被传递到表渲染器中。

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;}) );

列对象：

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

我面临的问题是排序无处可见，列似乎没有交互性并且用户无法对它们进行排序，尽管表格呈现良好。

先感谢您。

PS：我是 YUI() 的新手。

Answer 1

您需要确保 sortable: true 为需要排序的列设置。

这是一个具有排序功能的真实示例

Answer 2

看来这是问题所在：

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

应该是这样的：

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