I want to add hyperlink in the alloy ui data table. Below is my code.
<head>
<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<script>
YUI().use(
'aui-datatable',
function(Y) {
var columns = ['name', 'address', 'city', 'state','edit'];
var data = [
{address: '1236 Some Street', city: 'San Francisco', name: 'John A. Smith', state: 'CA', edit:'<a href="www.google.com">Google</a>'},
{address: '3271 Another Ave', city: 'New York', name: 'Joan B. Jones', state: 'NY', edit:'<a href="www.google.com">Google</a>'},
{address: '9996 Random Road', city: 'Los Angeles', name: 'Bob C. Uncle', state: 'CA', edit:'<a href="www.google.com">Google</a>'},
{address: '1623 Some Street', city: 'San Francisco', name: 'John D. Smith', state: 'CA', edit:'<a href="www.google.com">Google</a>'},
{address: '9899 Random Road', city: 'Los Angeles', name: 'Bob F. Uncle', state: 'CA', edit:'<a href="www.google.com">Google</a>'}
];
new Y.DataTable.Base(
{
columnset: columns,
recordset: data
}
).render('#myDataTable');
}
);
</script>
</head>
<body>
<div id="myDataTable"></div>
</body>
During display it is showing html as a string. how could I display it as a hyperlink ?
I think we cannot add markup tag in JSON but is there any chance to get my work done. Any help would be appreciated...!!
I think you can adjust your column definition to accommodate the link.
Say if you want to have a link on the values under the column edit
, you will have to define it as:
var columns = [
'name',
'address',
'city',
'state',
{
key: 'edit',
allowHTML: true // Must be set or the html will be escaped
}
];
However I have not tested this. You can find more information about Datatable Formatters
here.