jQuery Datatables inserting a field value in a cou

Question

I've a jQuery datatables plugin which does the following,

<tr>
            <th>Id</th>
            <th>Datee</th>
            <th>Delete</th>
</tr>

 $('#data').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "userlist.php",
        "aoColumns": [
            null,
            null,
            {
                "mDataProp": null,
                "sDefaultContent": '<a href="delete.php?action=activate&">DEL</a>'
            }
        ]
    } );

So what i'm doing here is that i'm getting data using server side processing and adding an additionalm column with link to delete the record.

Now I want id=<> for that particular record to be added at the end of & in a href as

a href="delete.php?action=activate&id=<<first column value> .

Also i want to convert MySQL date to PHP date for second column.

How can this be done ?

Thanks.

Answer 1

You can do it using getData or using jquery.
Change the following:

"sDefaultContent": '<a href="delete.php?action=activate&">DEL</a>'

To:

"sDefaultContent": '<a href="delete.php?action=activate&" class="delete">DEL</a>'

then use the following code:

$('#data').on('click', 'td .delete', function() {
    var id = $(this).closest('tr').find('td:first').html();
});

Demo

Answer 2

Using version 1.8.2, I was able to return the html using a function for mDataProp. In your case, it would look like:

"mDataProp": function (row) { '<a href="delete.php?action=activate&' + row[0] + '">DEL</a>'; }

Answer 3

Try this: Modify Ricardo's answer as follows:

"sDefaultContent": '<a href="delete.php?action=activate&" class="delete">DEL</a>'

$('#data').on('click', 'td .delete', function(e) {
    e.preventDefault()
    var id = $(this).closest('tr').find('td:first').html();
    var href='delete.php?action=activate&id=' + id;
//  $('a.delete', $(this)).attr('href', href);
    window.location.href = href;
});

EDIT: You don't need to have the id added to the href attribute of the link when the table is rendered in HTML. The following code will call the delete.php script via ajax and will pass the value of id to that script.

$('#data').on('click', 'td .delete', function(e) {
    e.preventDefault()
    var id = $(this).closest('tr').find('td:first').html();
    $.get("delete.php", {id:id});
});

(You will then need to update the displayed datatable as well somehow - there are API functions for this: Delete a row of a datatable).

UPDATE: Another option is to do the following:

$("a.delete").each(function(){
    var id = $(this).closest('tr').find('td:first').html();
    var href = "delete.php?action=activate&id=" + id;
    $(this).attr('href', href);
});