Example: DataTable - Delimited Textual Data Over XHR (YUI Library)

# DataTable Widget :: Delimited Textual Data Over XHR

### Sample Code

Data:

Domino's Pizza|615 Caliente Dr|Sunnyvale|(408) 732-3030|4|http://local.yahoo.com/details?id=21335892&stx=pizza&csz=Sunnyvale+CA&ed=17rS8q160Sy5Htog0TF1m1atNv01Iz7ySeGEMtCL4dJsf1ku0nhziD2qN5XcnHlJtDS4IydIbA-- ... Little Caesars Pizza|1039 Sunnyvale Saratoga Rd|Sunnyvale|(408) 245-0607|3|http://local.yahoo.com/details?id=21330174&stx=pizza&csz=Sunnyvale+CA&ed=89myuK160Syd6uoWQ5fTb6uLid70P.ucvPaBKA92m7bc1aVSW5LGmRbGsSIqT8U5e2eA4Ki4nQHVAAhh5.SVNIAQ

CSS:

/* custom css*/ #text {margin:1em;} #text table {border-collapse:collapse;} #text th, #text td {padding:.5em;border:1px solid #000;} #text th {background-color:#696969;color:#fff;}/*dark gray*/ #text th a {color:white;} #text th a:hover {color:blue;} #text .yui-dt-odd {background-color:#eee;} /*light gray*/

Markup:

<div id="text"></div>

JavaScript:

var formatUrl = function(elCell, oRecord, oColumn, sData) { elCell.innerHTML = "<a href='" + oRecord.Url + "' target='_blank'>" + sData + "</a>"; }; var myColumnHeaders = [ {key:"Name", sortable:true, formatter:formatUrl}, {key:"Phone"}, {key:"City"}, {key:"Rating", type:"number", sortable:true} ]; var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders); var myDataSource = new YAHOO.util.DataSource("./php/text_proxy.txt"); myDataSource.responseType = YAHOO.util.DataSource.TYPE_TEXT; myDataSource.responseSchema = { recordDelim: "\n", fieldDelim: "|", fields: ["Name","Address","City","Phone",{key:"Rating",converter:YAHOO.util.DataSource.convertNumber},"Url"] }; var myDataTable = new YAHOO.widget.DataTable("text", myColumnSet, myDataSource);