Server Side Processing.. add in custom column?
Server Side Processing.. add in custom column?
cstooch
Posts: 5Questions: 1Answers: 0
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?
This question has an accepted answers - jump to answer
Answers
You can use
columns.defaultContentorcolumns.renderfor this. Here is an example with defaultContent:http://live.datatables.net/xijecupo/1/edit
Kevin
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.
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
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!
I thought I'd share the solution I ended up with, as I noticed someone else in this forum was having some similar troubles:
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.