Datatables sClass setting in json

btz

Hi,
I'm new to Datatable and I'm having problems understanding how to define class name for column(s).

So I have this table,




Data
Description
Motor
Platform
Frame




I define following:
var mTable = $('#mobile').dataTable({
"sAjaxSource": "get.php?itype=mobile",
"bScrollCollapse": true,
"bPaginate": false,
"bFilter": false,
"bInfo": true,
"bDeferRender": true,
"bAutoWidth": true,
"bJQueryUI": true
});

get.php?itype=mobile returns:

{
"aaData": [
[
"AAAAAAAAAA",
"device1",
"1",
"1",
"1"
],
[
"BBBBBBBBBB",
"device2",
"2",
"2",
"2"
]
],
"aoColumns": [
{
"sClass": "m"
},
{
"sClass": "m"
},
{
"sClass": "m"
},
{
"sClass": "m"
},
{
"sClass": "m"
}
]
}

I'm unable to add jEditable function to these columns.

$('.m').editable('data_edit.php', {
loadurl : 'motor.php?x=1',
indicator : ' Saving',
tooltip : 'Click to edit',
type : 'select',
submit : 'OK'
});

Even if I set following to datatable initialization it does not work:
"aoColumnDefs": [
{"sClass": "m", "aTargets": [ '_all' ]}
]

If I add manually row to table and assign class="m" to it, it will work.

How do I define this correctly with sAjaxSource?

fbas

put the aoColumns in the dataTable() initialization object, not in the server script response.

[code]
var mTable = $('#mobile').dataTable({
"sAjaxSource": "get.php?itype=mobile",
"bScrollCollapse": true,
"bPaginate": false,
"bFilter": false,
"bInfo": true,
"bDeferRender": true,
"bAutoWidth": true,
"bJQueryUI": true.
"aoColumns": [
{
"sClass": "m"
},
{
"sClass": "m"
},
{
"sClass": "m"
},
{
"sClass": "m"
},
{
"sClass": "m"
}
]
}
});
[/code]

btz

I believe I tried that before, but I confirm that tomorrow at work..

Does it matter if
$('.m').editable('data_edit.php', {....
is defined before or after
var mTable = $('#mobile').dataTable({... ?

fbas

I believe so, yes.

btz

Okay.. I define following

[code]
var mTable = $('#mobile').dataTable({
"bScrollCollapse": true,
"bPaginate": false,
"bFilter": false,
"bInfo": true,
"bDeferRender": true,
"bAutoWidth": true,
"bJQueryUI": true,
"aoColumns": [
{
"sTitle": "Info"
},
{
"sTitle": "Description"
},
{
"sClass": "m", "sTitle": "Motor"
},
{
"sTitle": "Platform"
},
{
"sTitle": "Frame"
}
],
"sAjaxSource": "get.php?itype=mobile"
});
$('.m').editable('data_edit.php', {
loadurl : 'motor.php?x=1',
indicator : ' Saving',
tooltip : 'Click to edit',
type : 'select',
submit : 'OK'
});
[/code]
....
[code]


[/code]

It forms that table correctly:

Info Description Motor Platform Frame
BBBBBBBBBB device2 2 2 2
AAAAAAAAAA device1 1 1 1

Problem is that this editable is "active" only when i click "Motor" sTitle, it does not work when clicking on the "motor data".

Although when I check "View selection source" on data it is "1"

btz

I think I solved it :)

[code]
$('.m').live('mouseover', function(event){
$(this).editable('data_edit.php', {
loadurl : 'motor.php?x=1',
indicator : ' Saving',
tooltip : 'Click to edit',
type : 'select',
submit : 'OK'
});
});
[/code]

fbas

I believe the TH column header also gets the "m" sClass applied to it, so you might want to use a selector that only adds editable to cells in the tbody

$('tbody .m')

btz

Yep, thanks.