DataTables: Show action button based on request
I have jquery DataTables to display data via an ajax call. Everything loads nicely and in the last column I added an action button which will add data to another db.
But I can't figure out how to solve one thing:
When the button was clicked and the system added row data to another db, I don't want to show the button again on reload.
I have a figure that I need of course the id of all the rows in my add-to-db, so I made a db query returning all the row ids that were added, but how can I check the id corresponding to the row in my table, and then not showing button for row in dataTables?
Below you can see how I set up my DataTable:
var table = $('#user-table').DataTable({
"destroy": true,
"processing": false,
"serverSide": false,
"ajax": {
"url": "myAjaxCall",
"dataType": "json",
"data": JSON.stringify(data()),
"type": "GET",
"dataSrc": "collection"
},
"columns": [
{"data": "customerNumber"},
{"data": "name"},
{"data": "coNumber"},
{"data": "city"},
{"data": "email"},
{"data": "balance"},
{"data": null,
"defaultContent": "<a href='#' class='myButton btn'>Add</a>",
className: "center", "bSortable": false, "bSearchable": false}
]
});
I might really need help with this - first time with dataTables - I love it, but just need to get it to the finish line :-)
source to share
You can use the rowCallback function.
var arrayOfAlreadyAddedRows = [1,5,7]; //Here is array you made from db.
"rowCallback": function( row, data ) {
// I assume in your data you have a rowId column.
if ( $.inArray(data.rowId, arrayOfAlreadyAddedRows ) !== -1 ) {
$(row).find('td:eq(6)').html( "<a href='#' class='myButton btn'>Add</a>");
}else{
$(row).find('td:eq(6)').html("<b>Already added</b>");
}
}
or you have already marked the added row in your table data. something like a column named "added" with a yes / no / value
"rowCallback": function( row, data ) {
if (data.added === "yes") {
$(row).find('td:eq(6)').html("<a href='#' class='myButton btn'>Add</a>");
}else{
$(row).find('td:eq(6)').html("<b>Already added</b>");
}
}
source to share
You can simply use the render function on your button; just add defence columnDefs to the DataTable initialization: http://www.datatables.net/examples/advanced_init/column_render.html
This allows you to make logical decisions before elements are rendered.
var table = $('#user-table').DataTable({
.....
"columnDefs": [
{
// The `data` parameter refers to the data for the cell (defined by the
// `data` option, which defaults to the column being worked with, in
// this case `data: 6`.
"render": function ( data, type, row ) {
//in here you should check if your button was clicked - if the id matches the id of a button that was already clicked - if that the case just return an empty string otherwhise return a button:
if(buttonClicked) //you need to write that logic obviously
{
return "";
}else {
return "<a href='#' class='myButton btn'>Add</a>";
}
},
"targets": 6 //adjust as needed
}
source to share