Html template for table row

Html template for table row

jorkimjorkim Posts: 2Questions: 0Answers: 0
edited September 2011 in Feature requests
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.

Replies

  • jorkimjorkim Posts: 2Questions: 0Answers: 0
    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
  • billybragabillybraga Posts: 1Questions: 0Answers: 0
    I think something like that would be useful !!!
  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    Noted for a future enhancement :-). If any one else is interested in this, please also add an 'up vote' comment.

    Allan
  • voucvouc Posts: 1Questions: 0Answers: 0
    up vote
  • paulhickmanpaulhickman Posts: 21Questions: 1Answers: 0
    up vote
  • bleuscytherbleuscyther Posts: 1Questions: 0Answers: 0
    up vote
  • rplantikorplantiko Posts: 18Questions: 1Answers: 0
    edited May 2013
    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.
  • josefsabljosefsabl Posts: 8Questions: 0Answers: 0
    up vote
  • davidjbroadheaddavidjbroadhead Posts: 1Questions: 0Answers: 0
    up vote
  • ComarComar Posts: 1Questions: 0Answers: 0
    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.
  • RuslanRuslan Posts: 4Questions: 0Answers: 0
    up vote
This discussion has been closed.