text boxes inside datatable

dsridhar10

Hi,

Is it possible to have text boxes in the table and render data to the text boxes instead of lables? I am trying to create a spreadsheet like application where the table will have all text boxes in the cells.

allan

http://datatables.net/usage/columns#fnRender
http://datatables.net/examples/advanced_init/column_render.html

You might also be interested in the live DOM sorting abilities:
http://datatables.net/examples/plug-ins/dom_sort.html

Allan

dsridhar10

Hi Allan,

I am not adding the data to the datatable initially. I am loading the data dynamically. This is how I am doing.

[code]
var oTable;
jQuery(function($) {
oTable = $('#EmployeeTotals').dataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": false,
"bAutoWidth": false,
"aoColumns" : [
{"sTitle" : "Pay Code", "sClass" : "Medium"},
{"sTitle" : "Hours", "sClass" : "right"},
{"sTitle" : "Pay Rate", "sClass" : "right"}]
});
});

//on some javascript event I am calling the following function to load data.
function RebindEmpTotalsGrid(empno) {
oTable.fnClearTable();
var hours, payrate, paycode;
//get the employee map records.
var empmaprecords = getEmpTotalsMap(empno);
if (empmaprecords !== null) {
for (i in empmaprecords) {
recordIndex = empmaprecords[i].index;
if (emptotals[recordIndex][2] > 0) {
oTable.fnAddData([emptotals[recordIndex][0], emptotals[recordIndex][2].toFixed(2), emptotals[recordIndex][1].toFixed(2)]);
}
}
}
}

// I tried adding "fnRender" in the initialization phase but it didn't work.
[/code]

allan

fnRender will still work fine with dynamically added data. As will the DOM sorting. If this doesn't work then it's a bug and if you could post an example showing the issue, that would be great.

Allan

obet.tea46

how to get value from the textboxes in the hidden column?

here are my code:
[code]
function getValue(){
$( mTable.fnGetNodes() ).each(function(){
if(!this.rowIndex) return;

accNo = this.cells[0].innerHTML;
price = parseFloat($('#'+ accNo +'_price').val());
qty = parseFloat($('#'+ accNo +'_qty').val());

alert(accNo +','+ price +','+ qty);
});
}
[/code]
when I've run the above code, the "accNo" result is right but "price" and "qty" results are "NaN".

thanks..

Obet

allan

Don't use innerHTML as you need to access the DOM, not just a string (which is what innerHTML is returning). The value is not stored in the innerHTML, but rather as a DOM attribute. It is also complicated by the fact that for columns which are hidden by DataTables it will remove them from the DOM! So just using fnGetNodes() will not do enough...

What you need to do to get the TD elements for hidden columns is to get the settings object (fnSettings) and loop over aoData. This is an array of objects, with one object for each row. One of the properties is _anHidden - which is an array of the hidden TD elements (indexes by the hidden column index). So a little more complicated I'm afraid.

Sounds like a good candidate for a plug-in API function at some point...

Regards,
Allan