datatable & jEditable all deprecated ?!

paky

Hi all, I'm search an example for edit some column in my dataTable ... but I read all deprecated ! Now how can edit a column ? What plugin or sample code I can read ?

thanks ;)

allan

jEditable and DataTables are two separate plug-ins. There is a 3rd party library which provides integration between them, which I don't believe is supported any more, so that might well be deprecated, but basically the integration between the two is the same as any other plug-in - use the DataTables API ( fnUpdate etc) when you want to edit a cell.

Allan

girishmr

FYI,
You can try X-Editable which can be styled using twitter bootstrap, jQuery UI and jQuery. It supports in place editing and also using popovers. The plugin can be found at http://vitalets.github.io/x-editable/index.html

Allan,
Since it is open source and can be easily used in datatables, I have provided this link. My apologies if this goes against the rules of your site.

paky

Thanks all, I must iteract with server post, how can send post data for update my database-field ? With fnUpdate function ?

thanks

allan

@girishmr - Thanks for proving the link. I hadn't come across that component before - it looks interesting.

@paky

> I must iteract with server post, how can send post data for update my database-field ? With fnUpdate function ?

No - fnUpdate will not make an Ajax call. I'd suggest you get the editing working without DataTables first and then add DataTables.

Allan

girishmr

Allan,
Just a heads up. All you need to do in include the css and js files as usual and follow the examples to learn how to use editable. X-Editable uses a click event to edit a cell. If it is just a HTML table, it is a straight forward edit.

[code]
$('#example').editable({
/* Other stuff here*/
});
[/code]

While I used this plugin with dataTables, I faced issue in handling the click event. While using dataTables, the click by default will give the value of the cell. Instead we want to init the editable plugin. So I made a quick decision of using a hover event. Hence the ode becomes

[code]
$('#example').on('hover', function(){

$(this).editable({
/* Other stuff here */

});
});
[/code]

Probably this is not the best way to handle the event. But given the time I had, I used this method. Probably we can have a plugin to implement the editable in a more prudent manner.

You can have a look at http://www.bootsnipp.com/resources. This has a lit of all plugins which predominantly uses twitter bootstrap framework. You might get some interesting plugin there.

Hope this helps for those who are looking for a quick solution.

Thanks,
Girish