YUI-2 Datatable : Dynamic column definition with Server side AJAX pagination sorting

Question

I am using the below code to create a YUI datatable with dynamic data(columns). But am facing a issue in server side pagination. As of now it is working fine with client side pagination, but I need server side pagination, so that my page loading time will get reduced. Can you help me on this to fix the issue. Since I'm struggling in this area for past 2 days.Server side pagination with AJAX to render the data is my expectation.

Here is the code I Used

DataProvider.prototype = {
url:null,
data:null,
ds:null,
getData:function() {return this.data},
initialize:function(){
    var str = generateRequest();
    var newUrl = this.url+str;
    YAHOO.util.Connect.asyncRequest('GET', newUrl, this);
},
success:function(response){
    var responseVal = YAHOO.lang.JSON.parse(response.responseText);
    var columnList = responseVal.columnList;
    var sortedBy = responseVal.sortedBy;
    this.data = responseVal.results;

    if(this.data == '') {
        $('#dynamicdata').html('<font style="color:red;"> No Data Found!</font>');
    } else {
        this.ds = new YAHOO.util.FunctionDataSource(function(){return this.dataProvider.getData()});
        this.ds.responseSchema = {
            resultsList:"results",
            fields:columnList,
            // Access to values in the server response
            metaFields: {
                totalRecords: "totalRecords", 
                startIndex: "startIndex"
            }
        }
        this.ds.dataProvider = this;

        // DataTable configuration
        var myConfigs = {
            paginator: new YAHOO.widget.Paginator({ rowsPerPage:20 }), // Enables pagination 
            width:"80%", height:"auto"
        };

        // FORMATTING CELL COLOUR BASED ON THEIR VALUES
        var myCustomFormatter = function(elLiner, oRecord, oColumn, oData) {    
            var columnKey = oColumn.getKey();
            var frmCurrentPeroid = $('#from').val();
            //var frmCurrentPeroid = '2013-03-13';
            var defaultLabels = ['Product type','Total 1','Total 2','Change'];

            if (isDate(columnKey) && $.inArray(columnKey, defaultLabels) === -1) {

                if(columnKey < frmCurrentPeroid) {
                    YAHOO.util.Dom.addClass(elLiner.parentNode,'orange');
                    elLiner.innerHTML = oData;
                    //alert('blue');
                } else {
                    YAHOO.util.Dom.addClass(elLiner.parentNode,'blue');
                    elLiner.innerHTML = oData;
                }                   
            } else {
                if(columnKey == 'Total 1') {
                    YAHOO.util.Dom.addClass(elLiner.parentNode,'orange');
                    elLiner.innerHTML = oData;
                    //alert('blue');
                }       
                else if(columnKey == 'Total 2') {
                    YAHOO.util.Dom.addClass(elLiner.parentNode,'blue');
                    elLiner.innerHTML = oData;
                    //alert('blue');
                }
                else if(columnKey == 'Change') {
                    split_data = oData.toString().split('_');   
                    var fieldData = null;
                    var fieldFormatter = null;

                    fieldData = split_data[0];
                    fieldFormatter = split_data[1];

                    if(fieldFormatter == 'green') {                     
                        YAHOO.util.Dom.addClass(elLiner.parentNode,'green');
                        elLiner.innerHTML = fieldData;
                    }
                    if(fieldFormatter == 'red') {
                        YAHOO.util.Dom.addClass(elLiner.parentNode,'red');
                        elLiner.innerHTML = fieldData;
                    }
                }
                else if(columnKey == 'Product Name') {
                    var filterStr   = oData.substring(0,30);
                    elLiner.innerHTML = '<a href="..product-detail.php?product_id='+oRecord._oData.product_id+'&height=400&width=850&modal=true" title="'+oData+'" class="thickbox" target="_self">'+filterStr+'</a>';
                    //alert('blue');
                }                               
                else {
                    elLiner.innerHTML = oData;
                }       
            }
        };

        // Add the custom formatter to the shortcuts
        YAHOO.widget.DataTable.Formatter.myCustom = myCustomFormatter;

        //YAHOO.widget.DataTable.formatLink = formatLink;

        /* make call to initialize your table using the data set */
        var myDataTable = new YAHOO.widget.DataTable("dynamicdata", columnList, this.ds, myConfigs);
    }
}

}

Followed the code posted in this page Click here

Thanks in Advance, Raja

score 0 · Answer 1 · answered May 04 '13 at 05:39

I haven't been doing YUI2 for quite some time so I am no longer able to help you directly. Perhaps this example can help: http://www.satyam.com.ar/yui/#ServerDriven . I do remember that there were big changes in 2.6 and this examples are marked 2.4, perhaps they no longer work.

YUI-2 Datatable : Dynamic column definition with Server side AJAX pagination sorting

1 Answers1