Add New, Edit, Delete Buttons

xtremer360

I keep seeing these buttons on some of the examples for the datatables that will bring up forms for the add new and edit buttons and then delete the row after sending data about the row to the server. However I'm having a hard time finding how to add these to the sDom.

allan

The plug-in Editor ( http://editor.datatables.net/ ) is what is adding these buttons (through TableTools).

A typical initialisation to get the buttons might look like this:

[code]
$('#example').dataTable( {
"sDom": "Tfrtip",
"sAjaxSource": "php/browsers.php",
"aoColumns": [
{ "mDataProp": "browser" },
{ "mDataProp": "engine" },
{ "mDataProp": "platform" },
{ "mDataProp": "version", "sClass": "center" },
{ "mDataProp": "grade", "sClass": "center" }
],
"oTableTools": {
"sRowSelect": "multi",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
}
} );
[/code]

(from http://editor.datatables.net/release/DataTables/extras/Editor/examples/index.html ).

Worth noting that the buttons can be completely customised to perform whatever actions you want :-)

Allan

xtremer360

For some reason I have this as my datatable code and it doesn't want to create it as a datatable anymore with the added code from above.

[code]
$( '#titlestatuses-table' ).dataTable({
"sDom": '<"top"lf<"clear">>rt<"actions"<"actions-left"i><"actions-right"p>>',
"bAutoWidth": false,
"sAjaxSource": "php/titlestatuses.php",
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] },
{ "sWidth": "20px", "aTargets": [ 0 ] },
{ "sWidth": "40px", "aTargets": [ 1 ] },
{ "sClass": "alignCenter", "aTargets": [ 1 ] }
],
"oTableTools": {
"sRowSelect": "multi",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
}
});
[/code]

The old code that did work was this:
[code]
$( '#titlestatuses-table' ).dataTable({
"bAutoWidth": false,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] },
{ "sWidth": "20px", "aTargets": [ 0 ] },
{ "sWidth": "40px", "aTargets": [ 1 ] },
{ "sClass": "alignCenter", "aTargets": [ 1 ] }
]
});
[/code]

xtremer360

Does it look like I'm missing anything?

allan

Are you including dataTables.editor.js and TableTools.js (sometimes called dataTables.tabletools.js)? If you look at the console on your browser (i.e. Firebug or Inspector) do you see any errors?

Allan

xtremer360

I'm not including them because I don't have copies of those files. Where can I download them at?

xtremer360

I used the same code above and this is the live version.

http://www.kansasoutlawwrestling.com/kowmanager/titles/titlestatuses

xtremer360

I found the tabletools.js file in the latest version of datatables but I can't find the editor.js file.

korukyu

I would assume editor.js can be found in the link he provided above: http://editor.datatables.net/

xtremer360

So its something you have to pay for? With money being tight right now is there an alternative way of creating these add/edit/delete buttons and still keep similar functionality??

allan

> So its something you have to pay for?

Yes Editor is commercial software an requires a license ( http://editor.datatables.net/purchase/ ). As you say, money is tight, and we all have to earn some somehow :-).

> is there an alternative way of creating these add/edit/delete buttons and still keep similar functionality??

TableTools is open source (GPLv2 or BSD) and that is what is being used to actually create those buttons - so you could do that, and the create software such as Editor that will actually do something when you click on the buttons. Editor is really designed to be a 'time saver' so you can just pick it up without needed to write a whole lot of editing software, leaving more time for earning cash :-)

Allan

xtremer360

Okay so i'm going to try and use Table Tools. I included the TableTools file but I'm getting an error in the TableTools js file. It says: ZeroClipboard_TableTools is not defined on line 1221.

http://www.kansasoutlawwrestling.com/kowmanager/titles/titlestatuses

allan

You need to include ZeroClipboard.js as well - which is in the same directory as the TableTools.js file - or you can use TableTools.min.js which does include the ZeroClipboard file itself.

Allan

xtremer360

I instead included the minified version and all is fine I just need to figure out how I get my text buttons to appear just like the ones on the examples.

allan

Have you included the TableTools CSS as well? :-)

xtremer360

So I was looking around and I'm having a hard time finding the css file for it. I think I'd rather have them also look like this: http://datatables.net/release-datatables/extras/TableTools/theme.html

allan

Right click on that page and "view source" - you'll see the exact setup I've got to make the page look like that. Or download the DataTables package and look at the file.

xtremer360

This is looking amazing! Just need to understand with these text buttons how when I click on the Add button I'm going to need it to do something special. I'm using codeigniter as my php framework. I'm thinking I'm going to need it to load the addnew view file and then for the edit form it was going to need to load the the edit view file with but would need to know the id of the row it's wanting to edit and then delete is self explanatory. I'm sure all possible correct?

allan

Yes all quite possible. You can use the fnClick option for TableTools to tell it what to do on button activation: http://datatables.net/extras/tabletools/button_options#fnClick

Allan

xtremer360

awesome but I'm trying to figure out why when I add these buttons the pagination button styling changes. Look at my page link above. And how should I shift the add new delete buttons does to better align the buttons with the rest of the dropdown and search part of the table.

xtremer360

I'm still trying to figure out the fnClick to where when I click on the delete button it creates the array of titles and sends them to the delete function. Here's what I have so far.

[code]
{
"sExtends": "text",
"sButtonText": "Delete",
"sButtonClass": "delete",
"sAjaxSource" : "/path/to/function",
"fnServerParams": function (aoData) {
aoData.Push(ArrayWithCheckboxInfo);
},
"fnClick": function ( nButton, oConfig, oFlash ) {
alert( 'Mouse click' );
}
},
[/code]

Here's my table:
[code]



IDTitle NameStyleStatus



1Undisputed TitleSinglesActive

2Outlaw TitleSinglesActive

3Tag Team TitlesTag TeamActive

4asdfSinglesInactive

5Testing TitleStableActive

6Testing TitleTag TeamInactive

7testingSinglesActive


[/code]

allan

fnServerParams isn't a TableTools option, unless you've extended the text button to accept that? I don't think sAjaxSource is either actually.

Basically you just need to make a plain old $.ajax() call inside fnClick :-). See:
http://api.jquery.com/jQuery.ajax/

Allan