Server Side Processing.. add in custom column?

cstooch

So I'm using server side processing as the data source for my datatable.

Let's say I have a file called transactions.html, somwhere in it is where I initialize my data table, like so:

var table = $('#transactions').DataTable({ "processing": true, "serverSide": true, "ajax": { url: "transactionsdata.php", // json datasource data: {action: 'getTransactions', currentpage: '<?=$currentpage?>'}, type: 'post' });

That works wonderfully, but I'm wondering how I can throw in a custom column in addition to my existing columns. I want to use PHP to check if the user has admin access (I already can do that), and if so, then they will have a column added to the end which allows them to delete the row from the database.

I'm already currently doing that on the PHP file that is the data source (transactionsdata.php in my example), but I feel like that's not the 'right' way to do it, as I'd like to not have any front end dependencies in that JSON file/string. So I just need some help understanding how I can add a column in (perhaps when initializing the table) and populate it with whatever.

I couldn't find any example where custom columns were added via JS/jquery on the calling page's side (i.e. from transaction.html, in my above example). Is this possible without a lot of work?

kthorngren

You can use columns.defaultContent or columns.render for this. Here is an example with defaultContent:
http://live.datatables.net/xijecupo/1/edit

Kevin

cstooch

That's perfect and will do nicely. Thanks very much! Not quite sure yet how I get an ID for the row to be deleted just yet, but if it's possible with either of these options, I'll figure it out!

Edit: looks like I'll be able to do this with columns.render.

kthorngren

Not quite sure yet how I get an ID for the row to be deleted just yet

If the ID is in the row data then you should be able to get the ID similar to how the click events are setup in the example. If you want an ID associated with the button then you will need to use columns.render, something like this example:
http://live.datatables.net/qemodapi/1/edit

Kevin

cstooch

Huh, I missed the console logging in the example you sent.. I see that now, and that shows me how I can do it with the default content way too. Thanks again!

cstooch

I thought I'd share the solution I ended up with, as I noticed someone else in this forum was having some similar troubles:

$(document).ready(function() 
{
    var table = $('#transactions').DataTable({
                    "processing": true,             
                    "serverSide": true,             
                    "ajax": {                   
                        url: "transactions-data.php", // json datasource
                        data:   {action: 'getTransactions', currentpage: '<?=$currentpage?>'}, // Set the POST variable array and adds action: getTransactions
                        type: 'post'  // method  , by default get                   
                    },
                    "language": {
                        'loadingRecords': '&nbsp;',
                        'processing': '<div class="spinner"></div>'
                    },
                    "columns": [                                
                        { "data": "transaction_timestamp"},
                        { "data": "transaction_type_display"},
                        { "data": "transaction_details"},
                        { defaultContent: '<input type="button" class="deleteTrans" value="Delete"/>'}
                    ]
                });
    $('#transactions tbody').on('click', '.deleteTrans', function () {
        var row = $(this).closest('tr');

        var transactionID = table.row( row ).data()["transaction_id"];
        console.log(transactionID);
    });
});

A brief explanation:

I have my JSON data being fed via an ajax call to transaction-data.php .

The data has some columns in it that you see referenced above:
transaction_timestamp
transaction_type_display
transaction_details
and also a "hidden" one (visible in the JSON data):
transaction_id

I use the columns option to specify what columns are displayed to what th tag. The final th tag will get my custom button. I use defaultContent to add this button.

After the table is instantiated, I add an on click event to the button. The function behind this event will look for the row that the delete was clicked on. It will then look for the transaction_id column in the JSON data and store that in the transactionID. The next step would be to do something like this: window.replace('mylocation.html?id='+transactionID);

However, for now, I am just simply dumping to the console, and I've proven that the ID is shown correctly.