jQuery datatables columnDefs issues - javascript

Why isn't jQuery datatables columnDefs working with class names? The render callback is never fired.
The documentation states:
A string - class name will be matched on the TH for the column
Also, if I change to target index [0] instead, I get an error. Also, it fires about 22 times. Shouldn't it fire 6 times? 1 for each cell with index 0?
var dataSet = [
['Trident','Internet Explorer 4.0','Win 95+','4','X'],
['Trident','Internet Explorer 5.0','Win 95+','5','C'],
['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
['Trident','Internet Explorer 6','Win 98+','6','A'],
['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
['Trident','AOL browser (AOL desktop)','Win XP','6','A']
];
$('#example').dataTable( {
columnDefs: [
{
render: function ( data, type, row ) {
console.log(row);
},
targets: 'foo'
}
],
columns: [
{ "title": "Engine", class: 'foo' },
{ "title": "Browser" },
{ "title": "Platform" },
{ "title": "Version", "class": "center" },
{ "title": "Grade", "class": "center" }
],
data: dataSet
});
http://jsfiddle.net/y3fnvzad/1/

There is no columns.class property, use columns.className instead.
You're getting error when changing to targets:[0] because your columnDefs.render callback doesn't return any data, which it should. Using targets:0 or targets:[0] is a preferred way to refer to a column unless you need to refer using class name by design.
columnDefs.render fires more times than number of cells because this callback function is being called not only for display event but many others (filtering, sorting, etc.).
Your corrected code is:
var dataSet = [
['Trident','Internet Explorer 4.0','Win 95+','4','X'],
['Trident','Internet Explorer 5.0','Win 95+','5','C'],
['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
['Trident','Internet Explorer 6','Win 98+','6','A'],
['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
['Trident','AOL browser (AOL desktop)','Win XP','6','A']
];
$('#example').dataTable( {
columnDefs: [
{
render: function ( data, type, row, meta ) {
console.log(type, data, row);
return data;
},
targets: 0
}
],
columns: [
{ "title": "Engine", "className": "foo" },
{ "title": "Browser" },
{ "title": "Platform" },
{ "title": "Version", "className": "center" },
{ "title": "Grade", "className": "center" }
],
data: dataSet
});
See this JSFiddle for demonstration.
Optimized code
If you don't need to refer to a column by class name, your code could be optimized further. columnDefs.render callback could be defined in columns property. I have also added type detection in render callback to demonstrate how it could be used.
See the code below.
var dataSet = [
['Trident','Internet Explorer 4.0','Win 95+','4','X'],
['Trident','Internet Explorer 5.0','Win 95+','5','C'],
['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
['Trident','Internet Explorer 6','Win 98+','6','A'],
['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
['Trident','AOL browser (AOL desktop)','Win XP','6','A']
];
$('#example').dataTable( {
columns: [
{
"title": "Engine",
"className": "foo",
"render": function ( data, type, row, meta ) {
// If data is being displayed
if(type === "display"){
return "<b>" + data + "</b>";
// Otherwise, if data is not being displayed
} else {
return data;
}
},
},
{ "title": "Browser" },
{ "title": "Platform" },
{ "title": "Version", "className": "center" },
{ "title": "Grade", "className": "center" }
],
data: dataSet
});
See this JSFiddle for demonstration.

Related

How does omnibox addSuggest work in private mode?

I tried omnibox with the following code from MDN. When I trying, I temporarily loaded manifest.json from about:debugging. This worked in a normal browser, and typing cs a show a some suggestion.
However, this suggestion feature is not working in private mode. This did not change even if I allowed it to run in a private window.
How can I get the omnibox suggestion feature to work in private mode?
browser.omnibox.setDefaultSuggestion({
description: "Type the name of a CSS property"
});
/*
Very short list of a few CSS properties.
*/
const props = [
"animation",
"background",
"border",
"box-shadow",
"color",
"display",
"flex",
"flex",
"float",
"font",
"grid",
"margin",
"opacity",
"overflow",
"padding",
"position",
"transform",
"transition"
];
const baseURL = "https://developer.mozilla.org/en-US/docs/Web/CSS/";
/*
Return an array of SuggestResult objects,
one for each CSS property that matches the user's input.
*/
function getMatchingProperties(input) {
var result = [];
for (prop of props) {
if (prop.indexOf(input) === 0) {
console.log(prop);
let suggestion = {
content: baseURL + prop,
description: prop
}
result.push(suggestion);
} else {
if (result.length != 0) {
return result;
}
}
}
return result;
}
browser.omnibox.onInputChanged.addListener((input, suggest) => {
suggest(getMatchingProperties(input));
});
browser.omnibox.onInputEntered.addListener((url, disposition) => {
switch (disposition) {
case "currentTab":
browser.tabs.update({url});
break;
case "newForegroundTab":
browser.tabs.create({url});
break;
case "newBackgroundTab":
browser.tabs.create({url, active: false});
break;
}
});
My manifest.json follows below:
{
"manifest_version": 2,
"name": "text",
"version": "1.0",
"description": "text",
"background": {
"scripts": [
"background.js"
]
},
"omnibox": {
"keyword": "cs"
},
"permissions": [
"bookmarks",
"tabs"
]
}
Windows 10
Firefox 84.0.1 (64 bit)

Nested JSON data source with DataTables

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?

How to change an icon in a JQuery Datatables TD element, according to another TD element?

I want to create a Datatable with the JQuery Datatable library, but for beautification and UI reasons, I want an icon to change according to another input field. Lets say,
If td.field 4 is null then td.field 5 icon=1 else icon=2.
You are not going to add an Icon you are going to add a CSS Class and in the CSS class you are going to add the image you want.
Assuming you have made you ajax call and you have the JSON and you are creating the datatable.
table = $('#table').DataTable( {
"columns": [
{ "className":'userName col-md-2', "data": "userName" },
{ "className":'desc col-md-2', "data": "desc" },
{ "className":'timeStart col-md-2', "data": "timeStart" },
{ "className":'timeEnd col-md-2', "data": "timeEnd" },
{ "className":'dispatcher col-md-2', "data": "dispatcher" },
{
"className": 'edit',
"orderable": false,
"data": null,
"defaultContent": ''
},
],
"order": [[2, 'desc']], !NOT FINISHED YET
Immediate after this and before the table.row.add you have to create seperately the createdRow with the Icon you want to manipulate.
Inside the table section you add the statement you want to make for the createdRow.
"createdRow": function ( row, data, index ) {
if ( data.dispatcher == null ) {
$('td', row).eq(5).addClass("edit-incident2");
}else{
$('td', row).eq(5).addClass("edit-incident");
}
}
After this your code would look like the below witch is the fully table code.
table = $('#table ').DataTable( {
"columns": [
{ "className":'userName col-md-2', "data": "userName" },
{ "className":'desc col-md-2', "data": "desc" },
{ "className":'timeStart col-md-2', "data": "timeStart" },
{ "className":'timeEnd col-md-2', "data": "timeEnd" },
{ "className":'dispatcher col-md-2', "data": "dispatcher" },
{
"className": 'edit',
"orderable": false,
"data": null,
"defaultContent": ''
},
],
"order": [[2, 'desc']],
"createdRow": function ( row, data, index ) {
if ( data.dispatcher == null ) {
//console.log(data.dispatcher);
$('td', row).eq(5).addClass("edit-incident2");
}else{
$('td', row).eq(5).addClass("edit-incident");
}
}
} );
Then you draw your table and the statement makes the job.
table.row.add( {
"userName": responsejson.userName,
"desc": responsejson.desc,
"timeStart": responsejson.timeStart,
"timeEnd": responsejson.timeEnd,
"dispatcher": responsejson.dispatcher,
"_id": responsejson._id,
} ).draw();
The two CSS classes would look like this
td.edit-incident {
background: url('../img/incident_management.png') no-repeat center center;
cursor: pointer;}
td.edit-incident2 {
background: url('../img/incident_management2.png') no-repeat center center;
cursor: pointer;}
It is not something incredible fantastic but it took me some hours, and I think the result is nice and very easy for the user to immediately understand what is he looking.
"columns": [
{
"className": 'details-control', "orderable": false, "data": null,"defaultContent": '', "render": function (data, type, row) {
if(data.id==1)
return '<span class="glyphicon glyphicon-remove"></span>';
else
return '<span class="glyphicon glyphicon-ok"></span>';
},
}
]
just modify the column value before render.it's also possible to directly add the icon into datatable with the help of above code
giv ids for each row and tds
<tr id="1">
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
</tr>
if you creating <td> dynamically using the database
for(i=0;i<upto number of tds in a row;i++)
{
if($('#'+i).text()!='')//find td is null or not
{
$('#'+i).append('if');
}
else
{
$('#'+i).append('else');
}
}

Creating datatables from Javascript source

I am trying to build a datatable (1.10.7) based on an input of a javascript var filled with JSON data. While I've successfully used datatables with ajax sources, I've never attempted to just provide my own variable, but I need to in this case.
Here's my variable:
json = [
{"dateReceived":"2015-01-01","designCustomer":"MULTITEST 1","designCustomerLocation":"SUNNYVALE, CA"},
{"dateReceived":"2016-04-05","designCustomer":"MULTITEST 2","designCustomerLocation":"SUNNYVALE, CA"},
{"dateReceived":"1982-04-18","designCustomer":"MULTITEST 3","designCustomerLocation":"SUNNYVALE, CA"}
]
According to DataTables' page on Javascript-Sourced Data,
This is achieved using the dataDT option in the initialisation object, passing in an array of data to be used (like all other DataTables handled data, this can be arrays or objects using the columns.dataDT option).
I'm confused by the differences in their test string, and in mine:
var dataSet = [
['Trident','Internet Explorer 4.0','Win 95+','4','X'],
['Trident','Internet Explorer 5.0','Win 95+','5','C'],
['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
['Trident','Internet Explorer 6','Win 98+','6','A'],
['Trident','Internet Explorer 7','Win XP SP2+','7','A']
Namely, their test variable doesn't contain field names, while mine does.
Here is the code that I've written to try and parse my variable, json:
var table = $('#ltc-table').DataTable( {
"data" : json,
"columns" : [
{ "title" : "designCustomer" },
{ "title" : "designCutomerLocation" },
{ "title" : "dateReceived" },
],
"lengthMenu": [ 25, 50, 101 ],
"oLanguage": {
"sSearch": "Filter Results: "
}
});
It seems, based on the page I linked above, that I'm doing this correctly, but I'm getting errors instead:
Uncaught Error: DataTables warning: table id=ltc-table - Requested unknown parameter '0' for row 0.
Any tips?
If you want to use objects as data source instead of arrays, you need to bind the columns using the columns.data options:
json = [
{"dateReceived":"2015-01-01","designCustomer":"MULTITEST 1","designCustomerLocation":"SUNNYVALE, CA"},
{"dateReceived":"2016-04-05","designCustomer":"MULTITEST 2","designCustomerLocation":"SUNNYVALE, CA"},
{"dateReceived":"1982-04-18","designCustomer":"MULTITEST 3","designCustomerLocation":"SUNNYVALE, CA"}
];
var table = $('#ltc-table').DataTable( {
"data" : json,
"columns" : [
{ "data" : "designCustomer" },
{ "data" : "designCustomerLocation" },
{ "data" : "dateReceived" }
],
"lengthMenu": [ 25, 50, 101 ],
"oLanguage": {
"sSearch": "Filter Results: "
}
});
See demo

How to refresh Datatable data from js array of objects

I'm using the jquery DataTables plugin to display an array of objects. I would like to clear the table and redraw using the changed data. However, the only way I've been able to do that so far is to destroy the table and reinitialize. I'd like to know if there is a simple way to refresh from JS data source. This is what I'm doing, it works but feels wrong...
if (NAMESPACE.table){
NAMESPACE.table.destroy();
}
NAMESPACE.table = $('#assets-table').DataTable({
"data": filteredData,
"columns": [
{ "data": "id" },
{ "data": "type" },
{ "data": "city" },
{ "data": "state"}
]
});
if you want to clear the data present in dataTable simply call table.clear() it clears all cells in table.
and then add new data using table.row.add().draw();
table.destroy() does not removes data present in cell of table, it only destroys the current instance of dataTable you created.
Make it simpler:
NAMESPACE.table = $('#assets-table').DataTable({
"data": filteredData,
"columns": [
{ "data": "id" },
{ "data": "type" },
{ "data": "city" },
{ "data": "state"}
],
"destroy": true
});

Categories