Datatable get the values of all rows of a specific column - javascript

How to get all values of all rows of a specific column?
Basically what I want to achieve is, get all the values from 'Key' column and push to allAdminKeys array as global variable because I need those values in somewhere else.
var t = $('#adminKeysTable').DataTable( {
"ajax": {
"url": getKeysById,
"dataSrc": function(json) {
var rows = [];
for (var i=0;i<json.keys.length;i++) {
//skip rows "if a condition is met"
//here just any rows except row #1
if (json.keys[i].privileges == '32')
rows.push(json.keys[i]);
}
return rows;
}
},
"columns": [
{ "data": null },
{ "data": "name" },
{ "data": "key" },
{ "data": null }
],
"columnDefs": [
{ "targets": 0, "searchable": false, "orderable": false},
{ "targets": 2, "name": "key"},
{ "targets": -1, "defaultContent": '<div class="tb-btn regenerate-btn" id="btnRegenerateAdminKey" data-toggle="modal" data-target="#regenerateAdminKeyConfirmation"></div>'}
],
"order": [[ 1, 'asc' ]],
"paging": false,
"ordering": false,
"info": false,
'processing': true
} );
var allAdminKeys = [];
var rowData = t.rows().data(); //t is my table
$.each($(rowData), function(key,value){
allAdminKeys.push(value["key"]); //filter by "Key" column
})
console.log(allAdminKeys); // returning an empty array

You can use .columns() function to access the data
let col = 0 // can be column index or css class of column header
// get all cells of the column
const cells = $yourDataTable.columns(col).nodes()

"initComplete": function(settings, json){
for (var i=0;i<json.keys.length;i++) {
allAdminKeys.push(json.keys[i].key);
}
}
Managed to achieve what I wanted by adding this.

Related

Adding an element within a td in jQuery datatable

I have a js data table that I have implemented for pagination of data. It uses the jQuery data table. The data is being displayed correctly. However, I want to add an element within the first row of the data table.
Before I added it like this : <td>#Html.ActionLink(item.CarId, "Detail", "Cars", new { id = item.CarId},null)
<span class="dt-expand-btn js-expand-btn">+</span></td>
What I want to add within the td of the js is : <span class="dt-expand-btn js-expand-btn">+</span>
var carsDataTable = $('.js-cars-lists').DataTable({
"ajax": {
"url": "/Cars/CarsPagination",
"processing": true,
"serverSide": true,
"language": {
"paginate": {
"previous": '<i class="material-icons">chevron_left</i>',
"next": '<i class="material-icons">chevron_right</i>'
}
},
"order": [0, "asc"],
"type": "POST",
"datatype": "json"
},
"columns": [
{
"data": "CarId", "name": "CarId", "autowidth": true,
"render": function (data, type, row, meta) {
$(row.CarId).css('color', 'red');
return '' + row.CarId + '';
}
},
{ "data": "CarName", "name": "CarName", "autowidth": true },
Could someone please help me to achieve this ? Also, paginate icons are not appearing. Please help.
jQuery DataTable has a function of render it accepts 4 parameters function(data, type, row) which you can control the rendering of your rows. You can now check the rows of a table and add your element in it.
You can use columnDefs method and then render:
...
columnDefs: [{
"render": function(data, type) {
return '<span class="dt-expand-btn js-expand-btn">+</span>';
},
"targets": 0
}]
...
targets refers to the index of the table column (since you are referring to the 1st column) set it to 0

DataTables: Using AJAX, count how many rows in total have a specific value in a cell

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;
}
}

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

Datatables Format for Currency

I need to format a currency using commas in datatables JSON data. But I have got no luck, Please help me.
The code:
listReportByProductCat(function (json) {
var table = $('#bycat_table').DataTable({
"columnDefs": [
{ "visible": false, "targets": 1 }
{ "column": num-fmt, "targets": 3 } // PROBLEM HERE
],
"order": [[ 1, 'asc' ]],
"displayLength": 25,
"drawCallback": function ( settings ) {
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
api.column(1, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
$(rows).eq( i ).before(
'<tr class="group"><td colspan="6"><b>'+group+'</b></td></tr>'
);
last = group;
}
} );
},
destroy: true,
processing: true,
data: json,
"columns": [
{ "data": "Prod ID" },
{ "data": "catname" },
{ "data": "Product Name" },
{ "data": "Price" },
{ "data": "Qty" },
{ "data": "Total" }
]
});
So the problem happened on target : 3, I followed datatables doc using num-fmt but still doesn't work. Please help.
follow this link for sorting formatted data
https://datatables.net/plug-ins/sorting/#formatted_numbers
<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.numericComma.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable( {
"columnDefs": [
{ "type": "numeric-comma", targets: 3 }
]
} );
} );
</script>

Datatable row grouping

I have a working datatable that is retrieving data from a file :
I want to group row, something like this :
https://datatables.net/examples/advanced_init/row_grouping.html
My goal would to have my datatable to look like this, grouping row by the date (last column), but even looking at the code, I have trouble to make it work. I'd like some help to make that work if you could.
Here is the code of my datatable :
$(document).ready(function() {
$('#datatable').DataTable( {
"ajax": "<?php echo base_url()."assets/files/data/data.txt"; ?>" ,
"columns": [
{ "data": "etat" },
{ "data": "dest" },
{ "data": "message" },
{ "data": "exp" },
{ "data": "date" }
],
"order": [[ 0, "desc" ]],
"responsive": true
} );
} );
You should use drawCallback function.
Try.
$(document).ready(function() {
$('#datatable').DataTable({
"columns": [
{ "data": "etat" },
{ "data": "dest" },
{ "data": "message" },
{ "data": "exp" },
{ "data": "date" },
{ "data": "extra" }
],
"order": [[ 4, "desc" ]],
"responsive": true,
drawCallback: function (settings) {
var api = this.api();
var rows = api.rows({ page: 'current' }).nodes();
var last = null;
api.column(4, { page: 'current' }).data().each(function (group, i) {
if (last !== group) {
$(rows).eq(i).before(
'<tr class="group"><td colspan="8" style="BACKGROUND-COLOR:rgb(237, 208, 0);font-weight:700;color:#006232;">' + 'GRUPO ....' + group + '</td></tr>'
);
last = group;
}
});
}
});
} );
Result: https://jsfiddle.net/cmedina/7kfmyw6x/13/
It seems you get the error when outputting the url by PHP into the Javascript.
Try this instead:
ajax: "<?php echo base_url() . 'assets/files/data/data.txt'; ?>"
Not the single-qoutes in the PHP-code.

Categories