DataTable row editing ? Code provided but changes required

sunildon

Hi ALAN & co

As to my reference i initially done with cell by cell editing .
Now i need to shift my place and start editing row at a time and save back typically like a Inline editing rather not using popup .

My code :
$(document).ready(function () {

var tab = $('#myDataTable').dataTable({

"oTableTools":
{
"sSwfPath": "../../Content/copy_cvs_xls_pdf.swf"
},
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'DataProvider',
"bJQueryUI": true,
"sDom": '<"H"TCfr>t<"F"ip>',
"oTableTools": {
"aButtons": [
{
"sExtends": "copy_to_div",
"sButtonText": "Copy to div",
"sDiv": "copy",
}
]
},

"aoColumns": [
{
"sName": "ID"
, "bVisible" : false

},
{ "sName": "COMPANY_NAME", "sClass": "hidden-xs" ,
"fnRender": function(oObj)
{ return '' + oObj.aData[1] + '';
}
},
{ "sName": "ADDRESS" },
{ "sName": "TOWN" } //this will be drop-down assume ]
});

//This will be useful no more i guess :( sad
tab.makeEditable({
"aoColumns": [

null,
null,
{
indicator: 'Saving...',
tooltip: 'Click to select town',
loadtext: 'loading...',
type: 'select',
onblur: 'submit',
loadurl: 'AjaxDataProvider1'

}]
});
});



Any help is appreciated and as per my efforts i do had a look at blog/inline_editing and also blog/inline_editing/complete but those are with limited functionality and not handy
Regards

allan

Editor 1.3 has inline editing abilities. If you are interested I can send a trial beta package via e-mail to you? If so, should I use the e-mail address you used to signup for your DataTables account?

Allan

sunildon

Thank you responding back allan .
My mail id : sunil24sunil@gmail.com

Regards

sunildon

Hey allan

one more question these days i been in love with tabletools such a wonderful one which takes the pain away But i need slight advice how to place my SDOM under my button or label . So when i hover over the control the sDom should display ? Any workaround ?

Regards & Thank you for your time

allan

I don't quite understand - place the buttons under the sDom ? But the sDom is a parameter which defines where the buttons go.

Allan

numan_khan8481

hi allan how can i insert, delete, and update rows in data tabels?

allan

Have a look at Editor which provides those abilities: http://editor.datatables.net .

Allan

sunildon

Allan initially let me thank you for mailing up , Thank you

Coming to the question . I agree with you & yes , the sDom decides where the buttons should go . But the sDom structure look bit scary to understand and try but it is short n sweet .

I need simply to keep the buttons in a separate div outside .

example :

//How to place the buttons here ?


PS:actually keeping all buttons visible on a go to user is definitely not attractive . so i am planning to keep it under a EXPORT sort of button and when i mouse over just in-case if i get the Buttons in my Required DIV i can hide/show on click/Hover .

Regards

allan

Best way is to do it using the method described here: http://next.datatables.net/release-datatables/extensions/TableTools/examples/new_init.html . Using that, you can put the buttons anywhere on the page you want.

Allan

sunildon

awesome allan . Just curios to know how to deal the same positioning issue inside a DIV with Id toolbar using expression like this "sDom": '<"H"TCfr>t<"F"ip>' . .

Regards & your the best

sunildon

HI allan

If you can clarify on this i will be happy . Although i am done with my issue still i spent time on that sDom syntax which i mentioned above in my comment , so i want to know how . i cant let go which i started .

Regards mate .
Keeping helping everyone

allan

I'm not 100% sure what the question is I'm afraid - what positioning issue? The key thing about sDom is that each character in it, unless it is in quotes, is a feature. Its as simple as that. `t` is the table, `p` is paging, `l` is length etc.

So: `tpl` is the table, paging and then length. `lt` is the length and table only. Etc.

The 1.10 doc page also goes into a bit more detail: http://next.datatables.net/reference/option/dom

Allan

sunildon

Sorry allan for trouble .
Positioning issue in my sense is well let me get this clear with a example .
In my view page i have NEW(link),EXPORT(label),ADVANCED FIND(label) , MORE ACTIONS(label) in a div which will be my Top most section of a screen.

Later below that i having dropdownlist in other DIV for some other functionality.

Finally i have a DATATABLE which works cool . ---> What i need here is when i apply TableTools on datatable and after sDom setting these tabletools buttons(excel,pdf,print) show go to a DIV with a id say toolbar .

I am doing this because
Point 1: I can Hide/show the buttons generated by tabletools by jquery Hide/show on click
issue here : I dont want to Show the tabletools buttons anywhere near to dataTable (top/botton/on DT)
I need that in a gets inserted in a seperate DIV so i can use that DIV with id and i can do go ahead with my functionality

Thank you .

sunildon

When i use like below the Table tools butons getting placed next to the DIV as mentioned but those butons not working and i debugged its saying swf not found ?

$(document).ready(function ()
{
var table= $('#myDataTable').dataTable({
//"sDom": 'T<"clear">lfrtip', // IF i uncomment this and remove the last two line of code means tabletools buttons functionality working fine ..

"oTableTools": {
"sSwfPath": "../Content/copy_csv_xls.swf",
"aButtons": [
{
"sExtends": "copy",
"mColumns": [1, 2, ]
},
{
"sExtends": "csv",
"mColumns": [1, 2, 3, ]
},
{
"sExtends": "pdf",
"mColumns": [1, 2, 3]
},
{
"sExtends": "print",
"mColumns": [3, 4]
},
]
},
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "AjaxHandler",
"bJQueryUI": true,
"sPaginationType": "full_numbers",

"aoColumns": [
{ "sName": "Lead_Id" },
{"sName": "LeadName" },
{ "sName": "ContactName"},
{ "sName": "CompanyName" },

]

})

var tt = new $.fn.dataTable.TableTools(table);
$( tt.fnContainer() ).insertAfter('div.info');


});

Regards

sunildon

In additon to my code i studied the link provided by you very carefully and tried liike :
Based on this logic :
[code]
/* Results in:

{filter}
{length}
{information}
{pagination}
{table}

*/
$('#example').dataTable( {
"dom": '<"wrapper"flipt>'
} );
[/code]

I have a DIV :



When i write sDom : '<"toolbar"lfrtip>',
I am not getting anything . I expected the table tools buttons comes into the DIV with class toolbar

Regards