At the first Page I can see negative value (e.g. -11) being changed to red.
However, when I clicked to the second page, negative value didn't change to red.
My code as below:
$("#listReport").DataTable({
'aoColumnDefs': [{
'bSortable': false,
'aTargets': [-1]
}]
});
$('#listReport tbody td').each(function (index) {
var qtyvalue = $(this).html();
if (qtyvalue < 0) {
$(this).wrapInner('<strong style="color:red"></strong>');
}
});
Any idea what to change in my code so that pagination works well with color change of the negative values?
You can use columns.render instead of manually trying to do it. Try this
$("#listReport").DataTable({
'aoColumnDefs': [
{
'bSortable': false,
'aTargets': [-1]
},{
'targets': [1], // target column
"data": 1, // column index
"render": function ( data, type, row, meta ) {
if( type === 'display' ){
return '<strong style="color:red">'+data+'</strong>';
}
return data;
}
}
]
});
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
})
});
My code is:
var table1 = $('#view-table').DataTable( {
fixedHeader: true,
"search": {
"smart": false
},
"columnDefs": [
{
"targets": [ 0,16 ],
"visible": false,
"bSearchable": true
},
{
"orderable": false,
"targets": [ 1,15 ]
}
],
"createdRow": function( row, data, dataIndex ) {
if ( data[16] == "yes" ) {
$(row).addClass('warning');
}
if ( data[0] == "yes" ) {
$(row).removeClass('warning');
$(row).addClass('success');
}
},
"ajax": '/getViewData',
"pageLength": 25
});
I have looked at jQuery How to count the no of rows in table by distinct column value but it only brings back what's on the screen at the time.
What I need is to see how many rows have the value of 'yes' in the 16th column for all the data that is brought back. Not just the data is on the screen. Everything.
All the examples I've tried, as the one above, only work where it's not AJAX based
I have the same problem a few weeks ago, I'm not sure if this is the best solution but it did the work then:
var count = table1.rows(function(idx, data, node) {
return data[16] == 'yes'
}).count();
EDIT: If you want that count after the ajax ends, you can user initComplete
initComplete: function(row, data, index) {
var count = table1.rows(function(idx, data, node) {
return data[16] == 'yes'
}).count();
console.log('count: ', count);
}, // initComplete()
EDIT 2: add jsfiddle
You should probably use ajax callback.
Instead of this "ajax": '/getViewData' do this:
"ajax": {
"type": "GET",
"url": "/getViewData",
"dataSrc": function(json){
//Count your rows here
return json.data;
}
}
How to create an edit link with function having multiple parameter from the data columns returned from ajax.
I read about the render callback but it only gets one column value & I need 2.
I need something like the following pseudo code.
"columnDefs": [ {
"targets": [0,1],
"data": "0,1",
"render": function ( data, type, full, meta ) {
return ``
}
} ]
As I'm disabling global search on all column except one. I cannot use the above code that use targets property. I don't know how to achieve this, please guide.
Edit: Complete code
var datatable = $('#datatable').DataTable({
"ajax": "/get_data/",
"processing": true,
"serverSide": true,
"deferRender": true,
"columnDefs": [
{ "searchable": false, "targets": [ 0,2,3,4,5,6,7,8,9,10,11 ] }
]
});
You can access row data using full variable, for example full[0] or full[1].
However instead of generating links in HTML, I would retrieve row data in a click handler as shown below:
$('#example').DataTable({
"columnDefs": [
{
"targets": [0, 1],
"render": function ( data, type, full, meta ) {
return 'Edit';
}
}
],
// ... other options ...
});
$('#example').on('click', '.btn-edit', function(){
// Get row data
var data = $('#example').DataTable().row($(this).closest('tr')).data();
edit(data[0], data[1]);
});
I needed Edit link on first column, so I followed #Gyrocode.com answer and it works great.
I also wanted to use the global search for searching but only on one column. Datatable ColumnDef Documentation gave me the clue so I ended up doing as follows.
Here The complete code:
var datatable = $('#datatable').DataTable({
"ajax": "/get_data/",
"processing": true,
"serverSide": true,
"deferRender": true,
"columnDefs": [
{
"targets": 0,
"render": function ( data, type, full, meta ) {
return 'Edit';
}
},
{ targets: 1, searchable: true },
{ targets: '_all', searchable: false }
]
});
I am using Data Tables Jquery Plugin. Can anyone help me stopping the table from sorting the first and second columns?
I need the user to be able to click on the other columns and sort them, but when I do it, the first two columns also sort. Can these values be locked and never sort? (I need them static)
For those of you looking to prevent sorting on columns but still allow them to sort when other columns are sorted:
$('#table').dataTable({
// Disable sorting on the first two columns
"aoColumnDefs" : [ {
'bSortable' : false,
'aTargets' : [ 0,1 ]
} ]
});
Or alternatively you can target a class like so:
// Disable sorting based on class
"aoColumnDefs" : [ {
"bSortable" : false,
"aTargets" : [ "disableSort" ]
} ]
Apply the class to the table header not the row.
For the OP, how to make the columns completely static in order to maintain some sort of ranking / index feature every time a column is clicked:
$(document).ready(function() {
$('#example').dataTable( {
"fnDrawCallback": function ( oSettings ) {
/* Need to redo the counters if filtered or sorted */
if ( oSettings.bSorted || oSettings.bFiltered )
{
for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
{
$('td:eq(0)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
}
}
},
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[ 1, 'asc' ]]
} );
} );
I have a datatable
<table data-bind="dataTable: {
data: items,
options: {
bPaginate: false,
aaSorting: [[0, 'desc']],
aoColumns: [
{ sClass: 'date', mDataProp: 'date' },
{ mDataProp: 'time' },
{ sClass: 'name', mDataProp: 'name' },
{ sClass: 'thought', mDataProp: 'thought' }
]
}
}">
there is also another value in the items that I don't display (thought type).
I want to change the class of the cell 'thought' depending on the value of 'thought type'.
So if thought type is new idea I want the cell that displays the value of 'thought' to be yellow.
Is this possible with datatables?
Add a function
"fnRender": function(obj) {
var sReturn = obj.aData[ obj.iDataColumn ];
if ( sReturn == "is wat you needed" ) {
sReturn = "add style to your element";
}
return sReturn;
}
Go through the example shown in below link
http://datatables.net/examples/data_sources/js_array.html
You can see that the A alphabet is bold compared to others..Hope this solves your problem
This Solution help fix my problem might help u.
for more info check this link: columns.createdCell
Using createdCell manipulate the DOM within columnDefs options.
For example,
"columnDefs": [
{
"targets": [1] // first CELL That will be checked,
"createdCell": function (td, cellData, rowData, row, col) {
if (cellData < 1) {
$(td).addClass('someClass');
}
}
},{
"targets": [2] //second CELL That will be checked,
"createdCell": function (td, cellData, rowData, row, col) {
if (cellData < 1) {
$(td).addClass('someClass');
}
}
} ],
Take a look at fnRowCallback in the API. For any given row, this can respond to that row just after drawing it and adjust the row as needed based on the data of that row. For example, something like this might work:
'fnRowCallback' : function(row, data) {
if (data[0] === 'someValue') {
$('td:eq(0)', row).addClass('someClass');
}
}