I am using datatables with statesave, colvis button to select the visibility of columns and rowcallback to put some colors on my data.
Here is my code:
activitiesTable = $('#activitiesTable').DataTable({
scrollX: true,
serverSide: true,
processing: true,
stateSave: true,
...
buttons: [
{
extend: "colvis",
className: "btn-sm",
columns: [ 1, 3, 4, 6, 7, 8, 9, 10, 12, 14, 16,18,20,22,24,26,28,30,32 ]
},
...
rowCallback: function(row, data, index){
if(data.jan_com<= 0){
$(row).find('td:eq(4)').addClass('zero');
}
else if(data.jan_otl> 0){
$(row).find('td:eq(4)').addClass('otl');
}
else {
$(row).find('td:eq(4)').addClass('forecast');
}
if(data.feb_com<= 0){
$(row).find('td:eq(5)').addClass('zero');
}
else if(data.feb_otl> 0){
$(row).find('td:eq(5)').addClass('otl');
}
else {
$(row).find('td:eq(5)').addClass('forecast');
}
...
So as you can see, I change the color of my data with class zero, forecast or otl.
The problem is that because it changes the columns that appear, the next time I reload, the colors are applied to the wrong column because column 4 is not anymore the column jan_com.
Is there a way to find the td corresponding to the column jan_com instead of asking td:eq(4)?
Thanks.
Related
I have a jQuery datatable where first column is barcode labels and they are 24 characters long. They could be all numeric characters or mix of alpha and numeric. My problem is when exporting to Excel and all labels look numeric.
It exports fine when label is 1234ABCD5678901234567890 or 001234567890001234567890 but labels such as 123004590218842001720584 are displayed as 123004590218842000000000 and when clicking on that cell it shows as 1.23004590218842E+23, and right justified as if number.
I tried forcing it to use column A as string using
$('row c[r^="A"]', sheet).attr('s', '50'); //"A" is Label column
Didn't work; all it did was replace 123004590218842000000000 with 1.23004590218842E+23.
This is my Excel customization section:
buttons: [
{
extend: "collection",
text: "Export",
buttons: [
{
extend: 'excel',
orientation: 'landscape',
pageSize: 'LEGAL',
customize: function (xlsx) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
var sheet2 = xlsx.xl['styles.xml'];
// use font size 10
var tagName = sheet2.getElementsByTagName('sz');
for (i = 0; i < tagName.length; i++) {
tagName[i].setAttribute("val", "10")
}
$('c[r=A1] t', sheet).text('Label Outcomes');
$('row:first c', sheet).attr('s', '2').attr('s', '32'); // first row is bold
// This didn't help, it just made the header of this column non-bold
$('row c[r^="A"]', sheet).attr('s', '50'); //"A" is Label column
$(sheet.body)
.css('font-size', '10pt');
$(sheet.body).find('table')
.addClass('compact')
.css('font-size', 'inherit');
},
exportOptions: {
columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 10]
},
},
I posted to datatable forum and got a response that solved my issue.
It boils down to adding a zero-width non-joiner character (\u200c) character to the columns. It preserves sorting (date, ...).
buttons: [
{
extend: "collection",
text: "Export",
buttons: [
{
extend: 'excelHtml5',
orientation: 'landscape',
title: 'My Excel Title',
//messageTop: 'List Success Transactions',
//messageBottom: 'The information in this table is copyright',
customizeData: function (data) {
for (var i = 0; i < data.body.length; i++) {
for (var j = 0; j < data.body[i].length; j++) {
data.body[i][j] = '\u200C' + data.body[i][j];
}
}
},
customize: function (xlsx) {
...
}
},
...
Link to solution is here
There is also a SOF post related to this issue that includes above solution here
I have a database field that contains either integer 1 (representing the value 'document') or integer 2 (representing the value 'email') and I use datatables to format/display these integers as the words 'document' or 'email' within the table column. I would therefore like to use YADCF to be able to select 'document' or 'email' and have datatables filter the resultset accordingly.
Link to screen shot of table column.
I have used the custom_func feature as follows (code stripped down for brevity), but regardless of all other aspects of the datatable looking and working correctly, with a filter selector looking as expected and holding the selected value, and no console errors, my custom function is not being called. I have tried manually calling the custom function immediately before initialising YADCF, to check the scope, and it is being called just fine. Can anyone see anything obviously wrong please?
$(document).ready(function() {
function customFilterDocEmail(filterVal, columnVal) {
alert('customFilterDocEmail called');
var found;
if (columnVal === '') {
return true;
}
switch (filterVal) {
case 'doc':
found = columnVal === '1';
break;
case 'email':
found = columnVal === '2';
break;
default:
found = 1;
break;
}
if (found !== -1) {
return true;
}
return false;
}
})
var table = $('#table').DataTable({
serverSide: true,
processing: true,
ajax: {
url: '/api/datatables/getJson/doctext/doctexts',
type: 'POST',
data: function(d) {d.CSRFToken = '****';}
},
stateSave: true,
responsive: true,
pageLength: 25,
order: [[0, 'asc']],
columns: [
{ data: 'txt_type', width: '10%' },
{ data: 'txt_title' },
{ data: 'txt_name', width: '20%' },
{ data: 'link', orderable: false, width: '5%' },
],
}
});
yadcf.init(table, [
{ column_number: 0, filter_type: 'custom_func', custom_func: customFilterDocEmail,
data: [{ value: 'doc', label: 'Document' }, { value: 'email', label: 'Email' }] },
{ column_number: 1, column_data_type: 'text', filter_type: 'text', filter_delay: 500, filter_default_label: '', },
{ column_number: 2, column_data_type: 'text', filter_type: 'text', filter_delay: 500, filter_default_label: '', },
], 'footer');
YADCF Version: 0.9.3.beta.11
DataTables Version: 1.10.16
UPDATE: I haven't a clue what I'm doing wrong above, but I have come up with a little hack that saves having to use 'custom_func' and a custom filter. I've used the standard 'select' filter type but intercepted the filter string within the filter() method of my DatatablesSSP script thus:
$str = $requestColumn['search']['value'];
// returned search values for doctext 'txt_type' are Document/Email, so we need to map these to 1/2.
if ($column['db'] == 'txt_type') {
if ($str == 'Document') { $str = '1'; }
if ($str == 'Email') { $str = '2'; }
}
This works a treat :)
You have to place the customFilterDocEmail function outside of the $(document).ready block so it will be global and yadcf will see it
For my question I have prepared a simple test case at JS Bin.
In a word game I am trying to display the 20 longest words played by a player.
I deliver the data from PostgreSQL to DataTables jQuery plugin in JSON format. It is already sorted by word length and by the date when words were played.
This order is stored as numeric value (1, 2, 3, ...) in the row property of each JSON object:
var dataSet = [
{"row":4,"gid":1,"created":"25.02.2017 14:07","finished":null,"player1":2,"player2":1,"score1":30,"score2":52,"female1":0,"female2":0,"given1":"Abcde3","given2":"Ghijk4","photo1":null,"photo2":null,"place1":null,"place2":null,"word":"ZZ","score":11},
{"row":2,"gid":1,"created":"25.02.2017 14:07","finished":null,"player1":2,"player2":1,"score1":30,"score2":52,"female1":0,"female2":0,"given1":"Abcde3","given2":"Ghijk4","photo1":null,"photo2":null,"place1":null,"place2":null,"word":"BBBBB","score":6},
{"row":3,"gid":1,"created":"25.02.2017 14:07","finished":null,"player1":2,"player2":1,"score1":30,"score2":52,"female1":0,"female2":0,"given1":"Abcde3","given2":"Ghijk4","photo1":null,"photo2":null,"place1":null,"place2":null,"word":"ABC","score":7},
{"row":1,"gid":1,"created":"25.02.2017 14:07","finished":null,"player1":2,"player2":1,"score1":30,"score2":52,"female1":0,"female2":0,"given1":"Abcde3","given2":"Ghijk4","photo1":null,"photo2":null,"place1":null,"place2":null,"word":"XYZXYZXYZ","score":6}
];
Here is my JavaScript code, where I try to sort the column word (column 2) by the invisible column row (column 0):
function renderGid(data, type, row, meta) {
return (type === 'display' ? '<IMG SRC="https://datatables.net/examples/resources/details_open.png"> #' + data : data);
}
function renderGame(data) {
return 'Details for game #' + data.gid;
}
jQuery(document).ready(function($) {
var longestTable = $('#longest').DataTable({
data: dataSet,
order: [[2, 'desc']],
columns: [
{ data: 'row', orderable: false, visible: false },
{ data: 'gid', orderable: false, visible: true, className: 'details-control', render: renderGid },
{ data: 'word', orderable: true, visible: true, orderData: 0 /* order by invisible column 0 */ },
{ data: 'score', orderable: false, visible: true }
]
});
$('#longest tbody').on('click', 'td.details-control', function () {
var img = $(this).find('img');
var tr = $(this).closest('tr');
var row = longestTable.row(tr);
if (row.child.isShown()) {
row.child.hide();
img.attr('src', 'https://datatables.net/examples/resources/details_open.png');
} else {
row.child( renderGame(row.data()) ).show();
img.attr('src', 'https://datatables.net/examples/resources/details_close.png');
}
});
});
However this does not work - the displayed words order is ZZ, BBBB, ABC, XYZXYZXYZ (seemingly unsorted) - while it should be XYZXYZXYZ, BBBB, ABC, ZZ (sorted by row descending):
Why does not sorting work even though I have specified columns.orderData: 0?
And why can't I change ordering by clicking the greyed out arrows (shown by the red arrow in the above screenshot)?
Ok, this seems to be an old bug in dataTables jQuery plugin: the integer argument is not accepted.
I have to change it to an array with the single value:
{ data: 'word', orderable: true, visible: true, orderData: [0] },
and then it works:
I am using the Datatables plugin with the Autofill extension with input elements as outlined here:
DataTables' Autofill extension with input elements not working.
This works well. However, I am unable to disable the autofill for specific columns. When I use the "enable": false option, and set it to specific columns, then the callbacks stop working. Does anyone know if there is a way to disable certain columns for autofill, while still allowing the callbacks to function properly? The following disables cols 1-4, but the read/write/step functions no longer copy edited input values:
new $.fn.dataTable.AutoFill(table, {
"columnDefs": [{
"targets": [5, 6, 7, 8, 9],
"read": function (cell) {
return $('input', cell).val();
},
"write": function (cell, val) {
return $('input', cell).val(val);
},
"step": function (cell, read, last, i, x, y) {
return last === undefined ? read : last;
},
"enable": false, "targets": [1,2,3,4] //omitting this leaves all columns enabled.
}]
});
The way you've written it, you are defining the targets property twice in the same object. What you need to do is to give columnDefs another object pointing to the other targets. Like so:
new $.fn.dataTable.AutoFill(table, {
columnDefs: [
{
targets: [5, 6, 7, 8, 9],
read: function (cell) {
return $('input', cell).val();
},
write: function (cell, val) {
return $('input', cell).val(val);
},
step: function (cell, read, last, i, x, y) {
return last === undefined ? read : last;
}
},
{
targets: [1,2,3,4],
enable: false
}
]
});
I have an on click function storing the row data in the console log
if you click on the first two columns, you'll notice the function returns undefined, however any of the unfrozen columns returns the data object
I know that this has todo with the fact that the fixedcolumns are created in a cloned table, i was wondering if there was any workaround to this?
// Server-side processing with object sourced data
var $table;
$(document).ready(function() {
$table = $('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "/ssp/objects.php",
dom: "<'row'<'col-md-6 'l><'col-md-6 pull-right'>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
"columns": [
{ "data": "first_name" },
{ "data": "last_name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "start_date" },
{ "data": "salary" }
],
scrollY: "600px",
scrollX: "100%",
scrollCollapse: true,
"pageLength": 5,
lengthMenu: [[5, 10, 25, 50 ], [5, 10, 25, 50]],
order: [[ 1, "asc" ]],
} );
new $.fn.dataTable.FixedColumns( $table, {
leftColumns: 2
} );
$table.on("click", "tr",function(){
var aData = $table.row( this ).data();
console.log( aData);
} );
} );
here is my example code in action
You can use fnGetPosition to get information about row index.
From the manual:
This function is functionally identical to fnGetPosition in
DataTables, taking the same parameter (TH, TD or TR node) and
returning exactly the the same information (data index information).
The difference between the two is that this method takes into account
the fixed columns in the table, so you can pass in nodes from the
master table, or the cloned tables and get the index position for the
data in the main table.
Your code needs to be modified as follows:
var fc = new $.fn.dataTable.FixedColumns( $table, {
leftColumns: 2
});
$table.on("click", "tr", function(){
var aData = $table.row(fc.fnGetPosition(this)).data();
console.log(aData);
});
See this example code for demonstration.