Converting from Yahoo! YUI Datatable
Converting from Yahoo! YUI Datatable
relipse
Posts: 10Questions: 0Answers: 0
Recently, my boss and I decided to drop YUI altogether and go straight to jquery, that involves the datatable being dropped.
What I want to know is how to convert my existing datatables over to datatables.net
For example, YUI has formatters, which will format raw data into something else,
Does dt.net have this? I just kinda wish I had a YUI migration guide
[code]
glbDtBugs = new Y.DataTable({
colsresizable: true,
columns: [
{
key: "id",
width: '55px',
formatter: '',
label: '',
allowHTML: true
},
{key:'inc_id', label:'#', sortable: true, width: '100px'},
{key:'memo', sortable: true, resizable: true, width: '300px',
formatter: function(o){
var pixels = typeof(glbDtBugs.itsadtcr) == 'object' ? glbDtBugs.itsadtcr.getColumnWidthPx(2) : 166;
if (pixels < 166){
pixels = 166;
}
var fromUser = ClearBugs.users_assoc[o.data.created_by_user_id];
var assignedTo = '';
assignedTo = UserIdsToUsernames(o.data._assigned_to_);
if (assignedTo == ''){
if (o.data.assigned_to == 'all'){
assignedTo = 'ALL';
}else{
assignedTo = 'Anyone';
}
}
var cut_length = pixels/6.5;
var shortmemo = assignedTo + '« ';
shortmemo += o.data.memo.substr(0, cut_length);
if (o.data.memo.length > cut_length + 3){
shortmemo += '...';
}else{
shortmemo = o.data.memo;
}
if (fromUser && fromUser.username){
shortmemo += ' -' + fromUser.username;
}
if (o.data._bug_notes_ && o.data._bug_notes_.length > 0){
var count = 0;
for (var i = o.data._bug_notes_.length-1;i >= 0; --i){
count++;
if (count > 0){ shortmemo += '
'; }
shortmemo += getNoteShort(o.data._bug_notes_[i]);
if (count >= 3){ break; }
}
}
return shortmemo;
},
allowHTML: true // Must be set or the html will be escaped
},
{label:'modified / created', key:'date_updated', allowHTML: true, sortable: true, formatter: function(o){
var moment_created, moment_updated;
moment_created = moment().utc(o.data.date_created);
moment_updated = moment().utc(o.data.date_updated);
if (!moment_created){ moment_created = moment().utc(); }
if (!moment_updated){ moment_updated = moment_created; }
if (moment_created.isAfter(mom_now)){ moment_created = mom_now; }
if (moment_updated.isAfter(mom_now)){ moment_updated = mom_now; }
var fromUser = ClearBugs.users_assoc[o.data.created_by_user_id];
var s = '';
s += moment_updated.fromNow();
if (fromUser && fromUser.username){
s += ' by ' + fromUser.username;
}
s += ' / ';
s += moment_created.fromNow();
return '' + s + '';
}, allowHTML: true
},
{key:'kind', sortable: true},
{key:'priority', sortable: true},
{key:'status', sortable: true}
],
data: data,
scrollable: "y",
height:"500px",
width: "95%",
// Optionally configure your table with a caption
caption: "",
// and/or a summary (table attribute)
summary: "Bug List "/*,
//selectable
highlightMode: 'row',
selectionMode: 'row',
selectionMulti: false // allow multiple selections ...*/
});
[/code]
What I want to know is how to convert my existing datatables over to datatables.net
For example, YUI has formatters, which will format raw data into something else,
Does dt.net have this? I just kinda wish I had a YUI migration guide
[code]
glbDtBugs = new Y.DataTable({
colsresizable: true,
columns: [
{
key: "id",
width: '55px',
formatter: '',
label: '',
allowHTML: true
},
{key:'inc_id', label:'#', sortable: true, width: '100px'},
{key:'memo', sortable: true, resizable: true, width: '300px',
formatter: function(o){
var pixels = typeof(glbDtBugs.itsadtcr) == 'object' ? glbDtBugs.itsadtcr.getColumnWidthPx(2) : 166;
if (pixels < 166){
pixels = 166;
}
var fromUser = ClearBugs.users_assoc[o.data.created_by_user_id];
var assignedTo = '';
assignedTo = UserIdsToUsernames(o.data._assigned_to_);
if (assignedTo == ''){
if (o.data.assigned_to == 'all'){
assignedTo = 'ALL';
}else{
assignedTo = 'Anyone';
}
}
var cut_length = pixels/6.5;
var shortmemo = assignedTo + '« ';
shortmemo += o.data.memo.substr(0, cut_length);
if (o.data.memo.length > cut_length + 3){
shortmemo += '...';
}else{
shortmemo = o.data.memo;
}
if (fromUser && fromUser.username){
shortmemo += ' -' + fromUser.username;
}
if (o.data._bug_notes_ && o.data._bug_notes_.length > 0){
var count = 0;
for (var i = o.data._bug_notes_.length-1;i >= 0; --i){
count++;
if (count > 0){ shortmemo += '
'; }
shortmemo += getNoteShort(o.data._bug_notes_[i]);
if (count >= 3){ break; }
}
}
return shortmemo;
},
allowHTML: true // Must be set or the html will be escaped
},
{label:'modified / created', key:'date_updated', allowHTML: true, sortable: true, formatter: function(o){
var moment_created, moment_updated;
moment_created = moment().utc(o.data.date_created);
moment_updated = moment().utc(o.data.date_updated);
if (!moment_created){ moment_created = moment().utc(); }
if (!moment_updated){ moment_updated = moment_created; }
if (moment_created.isAfter(mom_now)){ moment_created = mom_now; }
if (moment_updated.isAfter(mom_now)){ moment_updated = mom_now; }
var fromUser = ClearBugs.users_assoc[o.data.created_by_user_id];
var s = '';
s += moment_updated.fromNow();
if (fromUser && fromUser.username){
s += ' by ' + fromUser.username;
}
s += ' / ';
s += moment_created.fromNow();
return '' + s + '';
}, allowHTML: true
},
{key:'kind', sortable: true},
{key:'priority', sortable: true},
{key:'status', sortable: true}
],
data: data,
scrollable: "y",
height:"500px",
width: "95%",
// Optionally configure your table with a caption
caption: "",
// and/or a summary (table attribute)
summary: "Bug List "/*,
//selectable
highlightMode: 'row',
selectionMode: 'row',
selectionMulti: false // allow multiple selections ...*/
});
[/code]
This discussion has been closed.
Replies
Sure - use mRender as a function. That what you can format it however you want.
> I just kinda wish I had a YUI migration guide
Interestingly, this is the first time I've had that request. If there are a few more, I'll look at putting such a guide together.
Allan