I need to get a row from another array into my datatable
$(document).ready(function() {
$('#example').DataTable( {
"data": ex1,ex2,
"destroy": true,
columns: [
{ ex1: "Name" },
{ ex1: "Position" },
{ ex1: "Office" },
{ ex1: "Extn." },
{ ex1: "Start date" },
{ ex1: "Salary" },
{ ex2: "article_id" }
]
});
}
I should be able to connect the databases using "article_id" since they both have it and the values are the same, but how do I use it in a datatable?
if ex1[0]['article_id'] === ex2[0]['article_id'] --
put ex2[0]['article_id'] into datatable.
Related
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
})
});
I am trying to get the <span> tag into the "salesStatusName" column cell that already has some data in it. The tag should be placed in there when the value of the last column "completelyDelivered" is true. However, I also don't want "completelyDelivered" to even be a column in the table, so I assume I somehow need to access the value of "completelyDelivered" attribute in the received JSON.
How it looks now:
https://i.imgur.com/S171i2o.png circle in a separate column
How I want it to look:
https://i.imgur.com/74nCnGu.png circle within Status Name column
I looked around and there are very similar questions, but I was unable to implement any solution.
DataTables instantiation code:
Note that I use AJAX and get JSON code returned
$(document).ready(function () {
$.fn.dataTable.moment('MM-DD-YYYY');
var datatableObj = $('#salesOrdersTable').DataTable({
"ajax": {
"url": "/Orders/GetAll",
"type": "GET",
error: function (error) {
RedirectUserToErrorPage();
}
},
"columns": [
{ "data": "salesOrderNumber" },
{ "data": "salesOrderNumber" },
{ "data": "poNumber" },
{ "data": "orderDateString" },
{ "data": "company" },
{ "data": "salesPerson" },
{ "data": "salesStatusName" },
{ "data": "completelyDelivered" }
],
"columnDefs": [
{
"targets": 0, //salesOrderNumber col
"orderable": false,
"render": function (data) {
return '<input type="button" value="+" onclick="location.href=\'/Shipments/Get?salesOrderNumber=' + data + '\'">';
}
},
{
"targets": 7, //completelyDelivered col
"render": function (data) {
if (String(data) == "true") {
return '<span class="SalesOrderDelivered">⬤</span>';
}
return "";
}
},
{ className: "salesOrderNumber", "targets": 1 },
],
});
I've done some research and figured it out.
Basically, if you write { "data": null }, as a definition for a column, you gain access to all properties of that row. So, in "render": function(data) function, write data["propertyName"] to get the value.
Code:
$(document).ready(function () {
$.fn.dataTable.moment('MM-DD-YYYY');
var datatableObj = $('#salesOrdersTable').DataTable({
"ajax": {
"url": "/Orders/GetAll",
"type": "GET",
error: function (error) {
RedirectUserToErrorPage();
}
},
{"data": "salesOrderNumber",},
{ "data": "salesOrderNumber" },
{ "data": "poNumber" },
{ "data": "orderDateString" },
{ "data": "company" },
{ "data": "salesPerson" },
{ "data": null, },//this is Sales Status column.
//"data: null" accesses all JSON data. We need this so that in "columnDefs" section
//we can use the values of both "completelyDelivered" and "salesStatusName" properties.
],
"columnDefs": [
{
"targets": 0, //button col
"orderable": false,
"render": function (data) {
return '<input type="button" value="+" onclick="location.href=\'/Shipments/GetShipments?salesOrderNumber=' + data + '\'">';
}
},
{
"targets": 6, //Sales Status col.
"render": function (data) { //This is where we can use values of "completelyDelivered" and "salesStatusName" JSON properties.
if (String(data["completelyDelivered"]) == "true") {
return (String(data["salesStatusName"]) + '<span class="AllDelivered"> ⬤</span>');
} else {
return String(data["salesStatusName"]);
}
}
},
{ className: "salesOrderNumber", "targets": 1 },
],
});
I have JSON data source with nested obvar
jsonData = {
"block":[
{"name": "Block 1. Social Work",
"subblock": [{
"name": "Block 1.1. Student Org (SO)",
"paragraph": [
{
"name": "Head of SO",
"score": "10,00"
}, {
"name": "Head of Group" ,
"score": "9, 00 "
}]
}]
}]
};
Wher block.name = table caption, subblock.name =
var subbl_content=document.createElement("th");
subbl_content.colSpan=4;
subbl_content.innerHTML=jsonData[0].block[0].subblock[0].name;
paragraph = table content. I try to place it to DataTable in the following way
$(document).ready(function() {
.....
$('#example').DataTable(
{
data: jsonData,
columns: [
{ data: 'block[0].subblock[0].paragraph[0].name' },
{ data: 'block[0].subblock[0].paragraph[0].score' }
]
});
}) ;
It would seem that must work but as a result i have in one Cell next value Head of SOiHead of Group. But when i some change data like
$('#example').DataTable(
{
data: jsonData.block[0].subblock[0].paragraph,
columns: [
{ data: 'name' },
{ data: 'score' }
]
});
All works. Is it normal or are there other methods of solution?
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
I got a small question.
My datatable uses AJAX to gather the rows for my table, the table sort on 6th. column.
Is it possible to always have a specific row to be first? No matter how the sorting is gone?
It does not matter if the row change position after the initial sorting.
My code looks like this:
$('#servertable').DataTable( {
"ajax": "/objects.php",
"deferRender": true,
"order": [[ 5, "desc" ]],
"pageLength": 25,
"columns": [
{ "data": "id" },
{
"data": "hostname",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).html("<a href='/"+oData.url+"'>"+oData.hostname+"</a>");
}
},
{ "data": "version" },
{ "data": "country_cn" },
{ "data": "map_id" },
{ "data": "players" }
]
});
I think this is one of the cases, where a custom sorting plugin is in its place. I guess you want to have certain players on top of the list, all the time? If you have an array of player names which should stay on the top :
var players = ['Yuri Berry', 'Vivian Harrell'];
then you can implement a sorting plugin like this :
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"players-on-top-asc": function( a, b ) {
a = ~players.indexOf(a) ? new Array(255).join('a') : a;
return a.localeCompare(b);
},
"players-on-top-desc": function( a, b ) {
a = ~players.indexOf(a) ? new Array(255).join('z') : a;
return b.localeCompare(a);
}
});
usage :
$('#servertable').DataTable( {
...
"columns": [
...
{ "data": "players", type: "players-on-top" }
]
});
see a small demo, look for column #2 -> http://jsfiddle.net/ryfce85u/