Want to have a edit and delete button added to datatable

aswebtechnology

Hi,
I am a newbie with datatables and need help to customize it. Will appreciate if someone can help me with it.

I am using datatables plugin for my view pages. For example I have a countries table in my database and I am using datatables with server side source to fill the table.

My first column is that of country_id which is a auto increment no and primary key.

Now i want to have a link or image at the end of the row which will link to seperate edit and delete pages with links like edit_country.php?id=1 and /delete_country.php?id=1. I want the id appended to the link as well.

Here is my code.
[code]

$(document).ready(function() {
var oTable = $('#view').dataTable( {
"aLengthMenu": [[10, 20, 50, 100, -1], [10, 20, 50, 100, "All"]],
"bProcessing": true,
"bServerSide": true,
"iDisplayLength": 20,
"sAjaxSource": "ajax/pages.php",
"sPaginationType": "full_numbers"
} );
} );

[/code]

[code]



Page Id
Title
Date Created





[/code]

Kindly let me know how can i add these 2 links i.e edit and delete in each row.
Its very urgent for me to have it.

Thanks.

allan

Absolutely this can be done - see this Editor example: http://editor.datatables.net/release/DataTables/extras/Editor/examples/envelope_inline.html . Editor also has a well defined client-server interface which can be used and example implementation code in PHP which will help get the job done as quickly as possible.

Allan

aswebtechnology

Hi allan, thanks for replying. I saw the link, yes its like my requirement. i.e. edit and delete buttons are there, but instead of opening any popup or modal box, i need to redirect to seperate pages when clicked on edit and delete links. For example if I click on edit then it should be redirected to a page say www.mysite.com/admin/page_edit.php?id=43 and same for delete link www.mysite.com/admin/page_delete.php?id=32

Here id is the primary key auto number which has to be passed along the url.

Can you please help to achieve this. I am newbie with datatables and jquery so I am not much sure about how to implement it. Any help towards it will be highly appreciable.

Thanks.

allan

I think that example still shows what you need - the links in the table are actually links - so just use them as regular links without applying the jQuery events to hijack the links and display Editor.

Allan

aswebtechnology

I have some issues in using the stuff mentioned in above link.

First of all content in is coming from server side. So how can I add the last
which will be like

Secondly how can i use the id number of the row i.e first column which is my auto number primary key to have it assigned to edit link in each row.

Here is my updated code.
[code]

$(document).ready(function() {
var oTable = $('#view').dataTable( {
"aoColumns": [
null,
{ "sClass": "no_mobile" },
{ "sClass": "no_mobile" },
null
],
"aLengthMenu": [[10, 20, 50, 100, -1], [10, 20, 50, 100, "All"]],
"bProcessing": true,
"bServerSide": true,
"iDisplayLength": 20,
"sAjaxSource": "ajax/pages.php",
"sPaginationType": "full_numbers"
} );
} );

[/code]

[code]



Page Id
Title
Date Created
Edit Delete





[/code]

Please help as I am in need to get it done. Thanks

aswebtechnology

@allan - I would really appreciate if you can guide me by adding the functionality in my above listed code.

allan

Use sDefaultContent just like in my example, or use fnRender to render the data for the cell.

Allan

aswebtechnology

I tried this and achieve it to some extent but there is a error while its being populated.

The error message is "DataTables warning(table id='view'): Requested unknown parameter '3' from the data source for row 0"

Here is my code
[code]

$(document).ready(function() {
var oTable = $('#view').dataTable( {
"aoColumnDefs": [
{
"fnRender": function (o) {
return '   ';
},
"aTargets": [3]
}
],
// sClass is used to pass css classes to columns
"aoColumns": [
null,
{ "sClass": "no_mobile" },
{ "sClass": "no_mobile" },
{ "bSortable": false, "sClass": "alignright", "sWidth": "50px" }
],

"aLengthMenu": [[10, 20, 50, 100, -1], [10, 20, 50, 100, "All"]],
"bProcessing": true,
//"bScrollCollapse": true,
"bServerSide": true,
"iDisplayLength": 20,
"sAjaxSource": "ajax/pages.php",
"sPaginationType": "full_numbers",
//"sScrollX": "100%",
//"sScrollXInner": "110%"
//"sScrollY": "200px"
} );
// Lines below hides the columns. Column no starts from 0 i.e. first column is 0
// oTable.fnSetColumnVis( 1, false );
// oTable.fnSetColumnVis( 2, false );
} );


[code]



Page Id
Title
Date Created
Actions





[/code]

Can you please tell me whats wrong with the code and why I am getting this error message.

aswebtechnology

Thanks allan, I got it fixed. No need to worry anymore as it is working fine now. Just added id column in the array in server_processing file.

allan

Add:

[code]
"sDefaultContent": ""
[/code]

to your column def. Otherwise it is trying to read a value that doesn't exist for the column.

Allan