We Keep Coding

How to (re)load data in jQuery event functions?

The following code is based on the jQuery event example at https://datatables.net/examples/advanced_init/events_live.html
The data is displayed in the table as expected. However, clicking a row returns: "You clicked on undefined's row", i.e. there is no value assigned where I would expect the file_id of the respective row.
I guess that the json data from '../api/data/uploads/' has to be realoded, however, I cannot figure out how.
Many thanks for your help.
$(document).ready(function() {
var tab_uploads= $('#tab_uploads').DataTable( {
"stateSave": true,
"stateDuration": -1,
"ajax": {
"url": '../api/data/uploads/',
"dataSrc": 'data'
},
"columns": [{ "data": 'file_id', "title": 'File ID' },
{ 'data': 'username', "title": 'Uploading user' },
{ 'data': 'supplier_id', "title": 'Supplier ID' },
{ 'data': 'timestamp', "title": 'Timestamp' },
],
"dom": 'Bfrtip',
"buttons": ['pageLength', 'copy', 'csv', 'excel'],
"order": [],
});
$('#tab_uploads tbody').on('click', 'tr', function () {
var data = tab_uploads.row( this ).data();
alert( 'You clicked on ' + data[0] + '\'s row' );
} );
});

I found a solution based on this discussion: https://datatables.net/forums/discussion/57563/datatable-returns-undefined-when-i-try-to-print-rowdata-in-console
Since you are using columns.data to define your columns the data
structure is objects not arrays. Instead of data[0] you need to use
data.id
Which translates into using alert( 'You clicked on ' + data.file_id + '\'s row' ); in the code above.

How to add dropdown in my datatable ajax serverside data in showing to table using datatable columns

I'm new to datatable ajax serverside data fething uisng php jquery ajax. I have to fetch data but now I want to add a dropdown in some columns to submit the data for a particular row.
In my table column with the name of "QA Status", I want to add a dropdown to every row.
and the dropdown option is 1) Pending 2) Accepted 3) Rejected
See the image
I want to add dropdown using jquery datatable using columns
This is my code for showing the data in the table
"columns": [
{
"render": function(data, type, full, meta) {
return "";
}
},
{ "data": "created_at" },
{ "data": "campaign" },
{ data: null, render: function ( data, type, row ) {
return data.fname+' '+data.lname;
}
},
{ "data": "c_name" },
{ "data": "qa_status" },
{ "data": "qa_resone" },
{ "data": "client_status" },
{ "data": "client_resone" },
{ "data": "score" }
]
In this code { "data": "qa_status" } I want to show a dropdown and I want also to add submit button in the last column of every row for selected value submitted without page reloading.
please help me.

try adding following and see if that works:
put following code inside datatable option:
let data_table = $(".table_class").DataTables({
columns: [
...
],
initComplete: function() {
this.api().columns().every(function() {
var column = this;
var select = $('<select style="width:100%;"><option value="">Select</option></select>')
.appendTo($(column.footer()).empty())
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex($(this).val());
column.search(val ? '^' + val + '$' : '', true, false).draw();
});
column.draw(false).data().unique().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
},
});

Populate a datatable starting from the second column

I have a datatable that retrieves json data from an api. The first column of the table should only contain a checkbox. However, when retrieving the data it populates the first column as well.
$.getJSON('https://api.myjson.com/bins/o44x', function(json) {
$('#parametrictable').DataTable({
data : json.data,
columns : json.columns,
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[ 1, 'asc' ]]
})
});
Is there any way that I can set that the data should only populate starting from the second column, leaving the first column to only contain the checkbox?

You can fix this issue by updating the api or in your js code just updating the data key value to null for first object in the json.columns array like:
$.getJSON('https://api.myjson.com/bins/o44x', function(json) {
json.columns[0].data = null;
json.columns[0].defaultContent = '';
$('#parametrictable').DataTable({
data: json.data,
columns: json.columns,
.... your rest of code
})
});
EDIT:
I meant what your suggestion only did was hide the data that was overlapping with the checkbox. I don't want it hidden. I want the first column to be, by default, only checkboxes. and the overlapping data should be on the 2nd column.
You can update your API like this to achieve that:
"columns": [
{
"data": null,
"defaultContent": ""
},
{
"data": "DT_RowId",
"title": "Id"
},
{
"data": "supplier",
"title": "supplier"
},
{
"data": "color",
"title": "color"
}
],
Or, you can update your code without modifying your API like:
$.getJSON('https://api.myjson.com/bins/o44x', function(json) {
// Add object for checkbox at first position
json.columns.unshift({"data": null, "defaultContent": ""});
$('#parametrictable').DataTable({
data: json.data,
columns: json.columns,
....your rest of code
})
});

jquery DataTables Editor: "select" field displays option value instead of label

I am using jquery's DataTables which is really working great. Then only problem I got is, that I am facing (in non-edit-view) the value of the select-field (which is an id). The user of course doesn't want to see the id of course.
Therefore I am looking for a possibility to configure that column in a way to show always the value of label property.
Here a some snippets:
$(document).ready(function() {
var table = $('#overviewTable').DataTable({
dom: "Tfrtip",
ajax: "/Conroller/GetTableData",
columns: [
{ data: "Id", className: "readOnly", visible: false },
{
data: "LoanTransactionId",
className: "readOnly readData clickable",
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
$(nTd).html("<a href='#'>" + oData.LoanTransactionId + "</a>");
}
},
{ data: "Id", className: "readOnly" },
{ data: "property_1", className: "readOnly" },
{ data: "Priority" },
{ data: null, className: "action readOnly", defaultContent: 'Info' }
],
order: [1, 'asc'],
tableTools: {
sRowSelect: "os",
sRowSelector: 'td:first-child',
aButtons: []
}
});
// data reload every 30 seconds
setInterval(function() {
table.ajax.reload();
}, 30000);
editor = new $.fn.dataTable.Editor({
ajax: "PostTable",
table: "#overviewTable",
fields: [
{
label: "Id",
name: "Id"
},
{
label: "Column 1",
name: "property_1"
},
{
label: "Priority",
name: "Priority",
type: "select",
options: [
{ label: "low", value: 0 },
{ label: "mid", id: 1 },
{ text: "high", id: 2 }
]
}
]
});
// Inline Edit - only those who are not readOnly
$('#overviewTable').on('click', 'tbody td:not(:first-child .readOnly)', function(e) {
editor.inline(this, {
submitOnBlur: true
});
});
How it looks in the display mode
How it looks in the edit mode

See the documentation on columns.render
You want to modify your column options for priority
Preferred Option: Your data source has a field with the priority as a string
This is the best option, as you don't want to have two places with this business logic. Keep it out of the client code.
Also, you will want to modify the editor as well so that the options used have been retrieved dynamically from the server to keep this business logic out of the client too. This is left as an exercise for the reader.
Since you don't provide details on what your data structure looks lik, I'm assuming it is an object, and it has an attribute priorityAsString so use the string option type for render.
columns: [
...
{
data: "Priority" ,
render: "priorityAsString",
},
Option 2) You write a function to map priority to string
Do this if you can't get the data from the server. But remember you will need to update many places when the priority list changes.
columns: [
...
{
data: "Priority" ,
render: renderPriorityAsString,
},
...
function renderPriorityAsString(priority) {
const priorityToString = {
0: 'low',
1: 'med',
2: 'high',
};
return priorityToString[priority] || `${priority} does not have a lookup value`;
}

"render": function ( data, type, full ) { return label;}

Add a class to a cell depending on data value

I have a datatable
<table data-bind="dataTable: {
data: items,
options: {
bPaginate: false,
aaSorting: [[0, 'desc']],
aoColumns: [
{ sClass: 'date', mDataProp: 'date' },
{ mDataProp: 'time' },
{ sClass: 'name', mDataProp: 'name' },
{ sClass: 'thought', mDataProp: 'thought' }
]
}
}">
there is also another value in the items that I don't display (thought type).
I want to change the class of the cell 'thought' depending on the value of 'thought type'.
So if thought type is new idea I want the cell that displays the value of 'thought' to be yellow.
Is this possible with datatables?

Add a function
"fnRender": function(obj) {
var sReturn = obj.aData[ obj.iDataColumn ];
if ( sReturn == "is wat you needed" ) {
sReturn = "add style to your element";
}
return sReturn;
}
Go through the example shown in below link
http://datatables.net/examples/data_sources/js_array.html
You can see that the A alphabet is bold compared to others..Hope this solves your problem

This Solution help fix my problem might help u.
for more info check this link: columns.createdCell
Using createdCell manipulate the DOM within columnDefs options.
For example,
"columnDefs": [
{
"targets": [1] // first CELL That will be checked,
"createdCell": function (td, cellData, rowData, row, col) {
if (cellData < 1) {
$(td).addClass('someClass');
}
}
},{
"targets": [2] //second CELL That will be checked,
"createdCell": function (td, cellData, rowData, row, col) {
if (cellData < 1) {
$(td).addClass('someClass');
}
}
} ],

Take a look at fnRowCallback in the API. For any given row, this can respond to that row just after drawing it and adjust the row as needed based on the data of that row. For example, something like this might work:
'fnRowCallback' : function(row, data) {
if (data[0] === 'someValue') {
$('td:eq(0)', row).addClass('someClass');
}
}