We Keep Coding

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

Retrieiving individual cell data of a DataTable row in jQuery

I need to make a the last column of the row disabled or enabled based the value present in the previous column of the same row. We have used Datatables to create the table.
I am not able to get the values present in the cells of the row while rendering the data using mRender for comparing. Can anyone please help in getting the values of the row in mRender?
I tried with iDataRow and also with createdRow and fnRowCallback to make the last column disabled after the creation of table.
I don't know why createdRow is not working in aoColumns.
Please find my code snippet below :
"aoColumns": [{
"mData": "productID",
"bSearchable": true,
"bSortable": true
}, {
"mData": "barcode",
"bSearchable": true,
"bSortable": true
}, {
"mData": "fulfillmentChannel",
"bSearchable": true,
"bSortable": true
}, {
"mData": "dateAvailable",
"bSearchable": true,
"bSortable": true
}, {
"mData": "stockStatus",
"bSearchable": true,
"bSortable": true
}, {
"mData": "stockAllocation",
"mRender": function (data, type, full, iDataRow) {
console.log(iDataRow);
<c:if test="${User.permission eq 'All'}">
return '<input type="text" class="form-control" style="width:100%" id="stockAllocation" validationDescription="<spring:message code="validation.mustBeDigit"></spring:message>" validationRules="^[0-9]+$" name="stockAllocation" value="' + data + '"></input>';
</c:if>
<c:if test="${User.permission eq 'ReadOnly'}">
return data;
</c:if >
},
"bSearchable": true,
"bSortable": true
}],
I want the values of fullfillmentchannell and stockAllocation into mRender write a condition and make the stockAllocaton field disabled.

SOLUTION
You can use full variable to access row's data, for example full['fulfillmentChannel'] or full['stockAllocation'].
Then you could write in mRender function:
"mRender": function (data, type, full, iDataRow) {
if(full['fulfillmentChannel'] === 'A' && full['stockAllocation'] === 'B'){
data = 'Disabled';
} else {
data = 'Not disabled';
}
return data;
}
DEMO
See this jsFiddle for demonstration of similar example using DataTables 1.10.

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.