Html template for table row

jorkim

Hi,

I'm using datatables, its very good. But I have a little problem with MVC (MVP) Model-View-Presenter model, because I'm using server-side procesing with PHP and I must specify output for row in Presenter, eg:
[code]
foreach ($items as $id => $item) {
$row = array();

$row[] = '' . $item->employer_user_surname . ' ' . $item->employer_user_name . '';
$row[] = $item->date;
$row[] = $item->name;
$row[] = $item->count;
$row[] = F::getPrice($item->cost);
$row[] = $item->note;

// add actions
$row[] = 'Edit
Delete
';
$output[] = $row;
}
$h->params['output'] = $output;
[/code]

Do you think, is possible to use it in template like with ColdFusion (but only with PHP, HTML, jquery...)

template:

[code]



Name
Date
Subject
Count
Price
Note
Action




#item.name #item.surname
#item.date
#item.subject
#item.count
#item.price
#item.note
Edit



[/code]

And jquery in datatable in first run get the first row and save in as template for row. If it get data by json (must be set as associated array, not by sequence), replace data in template row and draw each row by this template.

I think, is very usefull for styling and logic.

If you give me some advice, I can try it and add this functionality to datatables for all.

jorkim

Hi,

I have a little solution, but there is need upgrade core (or give me some advice, how to do without update core)

I'm using callback function:

[code]
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull, rowTemplate ) {
// iterate throught template row, find item and replace it
for (var j = 0, col; col = nRow.cells[j]; j++) {
$(col).html($(rowTemplate.cells[j]).html());

var rowClass = $(rowTemplate.cells[j]).attr('class');
if(typeof rowClass != 'undefined'){
// merge td classes
$(col).attr('class', $(col).attr('class')+ ' ' + rowClass);
}
for(var val in aData ){
if(aData[val] == null){
aData[val] = '';
}
$(col).html($(col).html().replace(new RegExp('#item.' + val, "g"), aData[val]));
}
}
return nRow;
}
[/code]

But, how can you see, there is using variable rowTemplate (that is getting in datatable.js in initialising) and aData as associative array.

At now is useful for me, but I need some advice to release for some else, especially with setting template row and get data as associative array without writing code to jquery.datatabls.min.js.

Thanks a lot, best regards, Jiri

billybraga

I think something like that would be useful !!!

allan

Noted for a future enhancement :-). If any one else is interested in this, please also add an 'up vote' comment.

Allan

vouc

up vote

paulhickman

up vote

bleuscyther

up vote

rplantiko

up vote

My current solution is to let the Ajax request handler transform the row data into HTML table rows on the server and to add them on client side into the table via Allan Jardine's fnAddTr plugin.

But the conversion data->html is a UI concern, not a model concern: For a web application which connects to a HTTP service to get JSON or XML "raw" data, the transformation to HTML belongs to the particular web application and should be performed in the browser.

Of course, everything is possible with string handling, but the right place for an HTML template would be the HTML code of the table.

josefsabl

up vote

davidjbroadhead

up vote

Comar

Hi,

I have this solution, I'm using Knockout with DataTables. Well, With this form I can creating a responsive design application.

[code]









Reference
Product
Category
Unit
Price



































[/code]

Here the ViewModel:

[code]



var viewModelProducts = function () {
var self = this;

self.products = ko.observableArray();

$.getJSON("/Api/Products", function (data) {
if (data.length > 0) {
self.products(data);
} else {
self.products([]);
}
}).done(function () {
var oTable1 = $('#sampleProducto').dataTable({
"bLengthChange": true,
"aoColumns": [
{ "bSortable": false },
null, null, null, null, null,
{ "bSortable": false }
]
});
});
}

ko.applyBindings(new viewModelProducts());



[/code]

But, often it is not efficient to populate the entire view model when a page loads.

Maybe, if I could this Knockout and DataTables Lazy Loading works better for Large DataTable.

Ruslan

up vote