User list

User list allows you select any row by clicking just above each row. Some actions will be provided according to selected row

Fruit list

Fruit list allows you select any row or all rows by clicking - single or double click - just above each row. Some actions will be provided according to selected row

Schema

In order to easy our lives, each datatable is designed according to the following schema

    	<div id="fruit" class="container">
            <div class="list"></div>

            <div class="buttons">
                <div>
                    <a class="add" href="#">Add fruit</a>
                </div>
                <div>

                    <a class="remove" href="#">Remove fruit</a>
                </div>
                <div>
                    <a class="edit" href="#">Edit fruit</a>
                </div>

                <div>
                    <a class="removeAll" href="#">Remove all fruit</a>
                </div>
            </div>
	</div>

    

YAHOO.widget.DataTable

Each DataTable instance is created as follows

    	new YAHOO.widget.DataTable($("#container")[0],
            [
                {"key":"name", "label":"Name"}, 
                {"key":"age", "label":"Age"}, 
                {"key":"framework", "label":"Framework"}
            ],
            new YAHOO.util.DataSource($("#source")[0],
                {
                    responseType:YAHOO.util.DataSource.TYPE_HTMLTABLE,
                    responseSchema:{ 
                    	// fields defines how our source schema is designed
                        fields:
                        [
                            {"key":"name"},
                            {"key":"age"},
                            {"key":"framework"}
                        ]}
                }));
    

YUI DataTable takes as its first argument a reference to a container, usually a div element, where our DataTable will reside

Second argument is an array of object literals to define the columns - label, formatting, class and so on - that are rendered into the table. Notice if you want the column takes a value from the DataSource, its key parameter MUST match key parameter in the DataSource. Therefore each key value MUST be unique

Third argument is YAHOO.util.DataSource: it takes as its first argument the source to populate our datatable. It can be:

• A single URL: "source.html"
• A array of JavaScript Objects: [{"key":"name", "label":"Name"}, {"key":"type", "label":"Type"}]
• A DOM reference to a HTML table: $("#source")[0]

The second argument of the DataSource is an object of settings. It defines:

• responseType: YAHOO.util.DataSource.TYPE_HTMLTABLE, YAHOO.util.DataSource.TYPE_JSARRAY, YAHOO.util.DataSource.TYPE_JSON, YAHOO.util.DataSource.TYPE_XML, YAHOO.util.DataSource.TYPE_TEXT
• responseSchema: it defines how our source is structured

The fourth argument of the DataTable - optional - defines additional settings: pagination, loading on demand, query string and so on

Author

Provided by Arthur Ronald F D Garcia. If you want to share knowledge or something else, feel free to contact me at arthurseveral@yahoo.com.br