YUI Datatable: custom column definitions and data

Question

I am trying to use the YUI datatable to display data from a JSON object which looks like this:

{\"results\":[{\"label\":\"Column 1\",\"notes\":\"Lorem ipsum dolo         


        

Answer 1

I spent a bit of my lunch hour on this, but I got something working for you. I looked at your JSON and the way you did it would not work in the data table. results is a list, every entry is a row, and every attribute is a column. Here is the json that I came up with that I hope works for you.

{
    "resultSet":{
        "columnList":[
            {"key":"Column1","label":"My Col 1"},
            {"key":"Column2","label":"My Col 2"},
            {"key":"Column3","label":"My Col 3"}
        ],
        "results":[
            {
                "Column1":"Row 1 value",
                "Column2":"Row 1 value",
                "Column3":"Row 1 value"
            },
            {
                "Column1":"Row 2 value",
                "Column2":"Row 2 value",
                "Column3":"Row 2 value"
            }
        ]
    }
}

I made a small javascript object for handling what you need to do. What needs to be done is you need to make an ajax call to the server for the data. This is so you can define the columns in the datasource before you MAKE the datasource.

function DataProvider(url){
            this.url = url;
        }

        DataProvider.prototype = {
            url:null,
            data:null,
            ds:null,
            getData:function() {return this.data},
            initialize:function(){
                YAHOO.util.Connect.asyncRequest('GET', this.url, this);
            },
            success:function(response){
                var responseVal = YAHOO.lang.JSON.parse(response.responseText);
                var columnList = responseVal.resultSet.columnList;
                this.data = responseVal.resultSet.results;
                this.ds = new YAHOO.util.FunctionDataSource(function(){return this.dataProvider.getData()});
                this.ds.responseSchema = {
                    resultsList:"resultSet.results",
                    fields:columnList
                }
                this.ds.dataProvider = this;
                /* make call to initialize your table using the data set */
                var myDataTable = new YAHOO.widget.DataTable("basic", columnList, this.ds, {caption:"DataTable Caption"});

                //console.debug(columnList);
                //console.debug(this.data);
            }
        }

So when the page loads do the following

function init(){
    var dataProvider = new DataProvider('testjson.json');
    dataProvider.initialize();
}

And your html should look like this

And you should have the following scripts included

That should work, works for me in both IE and firefox.