We Keep Coding

If Condition in datatable data column

I'm trying to add a condition to change what the column displays based on what the data is. So "Status" is "True" or "False". If it's true I want to display "Active" and if it's "False" I want to display "Inactive"
"aTargets": [2],
"bSortable": false,
"sType": 'numeric',
"sClass": "AutoDashGridStyle",
"sTitle": "Status",
"sWidth": "60px",
"mData": "Status",
"render": function (mData, type, row) {
return "mData" == 'True' ? 'Active' : 'Inactive'
}
Should display Active or Inactive

Okay so I was able to answer my own question. I simply changed the mData from
"mData": "Status",
to
"mData": function (source) {
return source.Status == "True" ? "Active" : "Inactive";
}

Pass two or more Id column in jQuery data tables as parameter?

I am using jQuery data table. I pass one id via <a href="#">. Now, i want to pass two or more id in single cell and <a href="#">.
My Code:
var table = $('table#companyTable').DataTable({
"sAjaxSource": ResultData, // "/GetcompanyList.json",
"sAjaxDataProp": "",
/// sort at column three
"order": [[ 3, "asc" ]],
"aoColumns": [
{ "mData": null },
{ "mData": "registrationType" },
{ "mData": "companyName" },
{ "mData": "emailId" },
{ "mData": "country" },
{ "mData": "district" },
{ "mData": "registrationDate" },
{ "mData": "companyId" },
{ "mData": "tendererId" },
{
"mData": "userId",
"render": function(data, type, row, meta){
if(type === 'display'){
data = 'View';
}
return data;
}
}
],
// define first column , is column zero
"columnDefs": [{
"searchable": false,
"orderable": false,
"targets": 0
}]
});
Now i need to pass userId, companyId, tendererId in one render and href link.
Just like below
data = 'View';

Jquery Datatable not working?

I have created a query table using data from json.
I am trying to combine two column values in one
but i always get undefined data when i try to combine two columns.
I am not sure what is wrong here.
not sure what is wrong here
$("#submit").click(function(){
var dataTableExample = $('#tbl_jad').DataTable();
$('#tbl_jad').show();
if (dataTableExample != 'undefined') {
dataTableExample.destroy();
}
dataTableExample =
$('#tbl_jad').DataTable({
"aaData": data.d.results,
"aoColumns": [
{
"mData": "ID"
},
{
"mData": "Position_x0020_Number",
},
{
"mData": "Title"
}, {
"mData": "Type_x0020_of_x0020_Action"
}, {
"mData": "Series"
}]
,
"columnDefs": [
{
"render": function ( data, type, row ) {
return data +' ('+ row[0]+')';
},
"targets": 1
},
{ "visible": false, "targets": [ 0 ] }
]
});
}
});

return data +' ('+ row["ID"]+')'
where ID is the column heading or column name

Get DataTables cell value to use in html link

I thought to be a simple thing, but!
Using DataTables, I would like to have the first column of the table hidden and use that cell data in an HTML image link in the next column cell.
html link using "User_ID", http://somepage.php?UID=data0
I have looked at fnGetData() and mRender and I just confused now.
MY CODE:
"aoColumns": [
{ "mData": "User_ID",
"bVisible": false, "bSearchable": false, "bSortable": false
},
{ "mData": null,
"bSearchable": false, "bSortable": false,
"sClass": "center",
"sDefaultContent": '<img src="images/look.png" width="16">'
},

I always help myself with this trick:
Don't set bVisible to false cause you will not have the data in the row. It's not rendered at all. Use sClass and set display:none. This way the column is invisible to the user, but it is still there.
Then you can use mRender to show a custom cell template:
"aoColumnDefs": [{
"aTargets": [0],
"sClass": "hiddenID"
}, {
"aTargets": [1],
"bSearchable": false,
"bSortable": false,
"sClass": "center",
"mRender": function(data, type, full) {
return 'Click me';
}
}, {
"aTargets": [2],
}, ]
Now the data is there, sortable and filterable.
Look at this Plunker and style.css to understand the concept behind this hack.

You may have a closer look at mData so you can do a callback function and dont have to use the hidden column:
// Using mData as a function to provide different information for
// sorting, filtering and display.
$(document).ready( function() {
var oTable = $('#example').dataTable( {
"aoColumns": [
{ "mData": "User_ID",
"bVisible": true, "bSearchable": false, "bSortable": false
}
],
"aoColumnDefs": [ {
"aTargets": [ 0 ],
"mData": function ( source, type, val ) {
if (type === 'set') {
source.id = val;
// Store the computed dislay and filter values for efficiency
source.id_display = val=="" ? "" : '<img src="images/look.png" width="16">';
source.id_filter = val=="" ? "" : val;
return;
}
else if (type === 'display') {
return source.id_display;
}
else if (type === 'filter') {
return source.id_filter;
}
// 'sort', 'type' and undefined all just use the integer
return source.id;
}
} ]
} );
} );

Sort datatable by hidden column

I have datatable with id, firstName, lastName, phone, updated fields.
Problem: I add to datatable only four fields (id, firstName, lastName and phone). Updated field is hidden.
Question: how to sort datatable by updated field?
My code:
$('#table').dataTable({
sDom: '<"top"fi>tS',
sScrollY: ($(window).height() - 250) + "px",
bPaginate: false,
bDeferRender: true,
bAutoWidth: false,
oLanguage: {
sInfo: "Total: _TOTAL_ entities",
sEmptyTable: "No pending entities"
},
"aoColumnDefs": [
{ "iDataSort": 4, "aTargets": [ 0 ] }
],
"aoColumns": [
{ "sWidth": "10%" },
{ "sWidth": "40%" },
{ "sWidth": "30%" },
{ "sWidth": "20%" },
{ "sTitle": "updated ", "bVisible":false }
],
fnCreatedRow: function( nRow, aData, iDataIndex ) {
$(nRow).attr('id', aData[0]);
}
});
table.fnAddData([id, firstName, lastName, phone, updated]);

From the documentation:.
iDataSort The column index (starting from 0!) that you wish a sort to be performed upon when this column is selected for sorting. This can be used for sorting on hidden columns for example.
Default: -1 Use automatically calculated column index
Type: int
// Using aoColumnDefs
$(document).ready( function() {
$('#example').dataTable( {
"aoColumnDefs": [
{ "iDataSort": 1, "aTargets": [ 0 ] }
]
} );
} );
// Using aoColumns
$(document).ready( function() {
$('#example').dataTable( {
"aoColumns": [
{ "iDataSort": 1 },
null,
null,
null,
null
]
} );
} );

you can simply use { "iDataSort": 4 } here (4 is the index of your hidden field)
var data = [
["1","john","mathew","1234",[]],
["2","Mary","rose","1234","1"],
];
To add hidden fields and to add data to table
aaData: data,
aoColumns :[
{ "sTitle": "id","bSortable": false },
{ "sTitle": "firstName","bSortable": false, },
{ "sTitle": "lastName", "bSortable": false,},
{"sTitle": "phone","bSortable": false},
{"sTitle": "updated ", "bVisible":false },
]
To add hidden fields use "bVisible":false

I was facing a problem by sorting the hidden column in runtime, don't know the approach is valid or not. I used the following lines to hide the column via CSS
td:nth-of-type(2) {
display: none;
}
Where 2 is your column, assign a class to your <th class="mycolum1"> and use jquery to sort it like
$("#button").click(function(){
$(".mycolumn").click();
})
Pardon me if the approach is not valid but in my case it is 100% acceptable.