We Keep Coding

Sorting DataTables RowGroup

I'm using the jQuery DataTables plugin. I'd like to create a Datatables rowgroup by column1 and sorting single groups by column2. However when I sort column2, rowgroup doesn't work
var table = $('#DT_StatMov').DataTable({
"ajax": {
"url": url,
"type": "POST",
"datatype": "json"
},
"columns": [{
"data": "Name"
}, {
"data": "Product"
}, {
"data": "Date",
"render": function(data) {
return moment(data).format('D/M/Y');
}
}],
"orderFixed": [1, 'asc'],
"order": [2, 'desc'],
rowGroup: {
startRender: null,
endRender: function(rows, group) {
return group + ' (' + rows.count() + ')';
},
dataSrc: 'Product'
},
"scrollCollapse": true,
"search": {
"caseInsensitive": true,
},
"ordering": false,
"processing": true
});

Datatables update cell value does not display

I'd like to know how change a cell value in Datatables.
I need to set the first cell of the last row with the value of rows.count().
Here's my function to create the Datatables :
function callForStepBoxes(){
flow.steps = [];
flowChartJSON = new Array();
if(!typeof currentFlowsTable === 'undefined' || currentFlowsTable != null){
$('#flowsTable').DataTable().ajax.url(restURI + 'orch/search/operations/'+flow.name).load();
$('#flowsTable').DataTable().ajax.reload();
} else {
currentFlowsTable = $('#flowsTable').DataTable({
responsive: true,
columnDefs: [
{ responsivePriority: 1, targets: 0 },
{ responsivePriority: 2, targets: 4 },
{ responsivePriority: 3, targets: 2 },
{ responsivePriority: 4, targets: 3 },
{ responsivePriority: 5, targets: 4 },
{ responsivePriority: 6, targets: 5 }
],
ajax: {
"url": restURI + 'orch/search/operations/'+flow.name,
"contentType": "application/json",
"type": "GET",
"data": null,
},
order: [0, 'desc'],
scrollCollapse: true,
scrollX: false,
aLengthMenu: [
[10, 25, 50, 100, -1],
[10, 25, 50, 100, "All"]
],
iDisplayLength: -1,
"columns": [
{"data": "ROWID", "defaultContent": "", "sClass": "displayNone"},
{"data": "STEP", "defaultContent": "", "sClass": "text-center limitedWidth"},
{"data": "OPERATION_NAME", "defaultContent": "", "sClass": "text-center limitedWidth"},
{"data": null, "defaultContent": "<input type='number' class='flowTimeoutValue'/>", "sClass": "text-center limitedWidth"},
{"data": null, "defaultContent": "<input type='number' class='flowLimitValue'/>", "sClass": "text-center limitedWidth"},
{"data": null, "defaultContent": "<input type='checkbox' class='flowActiveValue' checked='false'/>", "sClass": "text-center limitedWidth"},
],
'rowCallback': function(row, data, index) {
// Retrieve rows.count
lastStep = currentFlowsTable.data().count();
// Retrieve last row
lastRow = currentFlowsTable.row(':last').data();
// Set the value
lastRow.STEP = lastStep;
currentFlowsTable.row(':last').data().STEP = lastStep;
},
'drawCallback': function(settings){
createNodesAndEdges(flowChartJSON);
}
});
};
}
I retrieve the rows.count() value, I retrieve the last row and set the value but it does not work. What am I doing wrong ? Thank you !

can you please try below change.
var flowTable = $('#flowsTable').DataTable().ajax.url(restURI + 'orch/search/operations/'+flow.name).load();
flowTable.ajax.reload();

I've found the solution. I've add a class to the column I want to update the first cell then I check if the cell's value is empty or not.
function callForStepBoxes(){
flow.steps = [];
flowChartJSON = new Array();
if(!typeof currentFlowsTable === 'undefined' || currentFlowsTable != null){
var flowTable = $('#flowsTable').DataTable().ajax.url(restURI + 'orch/search/operations/'+flow.name).load();
flowTable.ajax.reload();
} else {
currentFlowsTable = $('#flowsTable').DataTable({
responsive: true,
columnDefs: [
{ responsivePriority: 1, targets: 0 },
{ responsivePriority: 2, targets: 4 },
{ responsivePriority: 3, targets: 2 },
{ responsivePriority: 4, targets: 3 },
{ responsivePriority: 5, targets: 4 },
{ responsivePriority: 6, targets: 5 }
],
ajax: {
"url": restURI + 'orch/search/operations/'+flow.name,
"contentType": "application/json",
"type": "GET",
"data": null,
},
order: [0, 'desc'],
scrollCollapse: true,
scrollX: false,
aLengthMenu: [
[10, 25, 50, 100, -1],
[10, 25, 50, 100, "All"]
],
iDisplayLength: -1,
"columns": [
{"data": "ROWID", "defaultContent": "", "sClass": "displayNone"},
{"data": "STEP", "defaultContent": "", "sClass": "text-center limitedWidth stepCell"},
{"data": "OPERATION_NAME", "defaultContent": "", "sClass": "text-center limitedWidth"},
{"data": null, "defaultContent": "<input type='number' class='flowTimeoutValue'/>", "sClass": "text-center limitedWidth"},
{"data": null, "defaultContent": "<input type='number' class='flowLimitValue'/>", "sClass": "text-center limitedWidth"},
{"data": null, "defaultContent": "<input type='checkbox' class='flowActiveValue' checked='false'/>", "sClass": "text-center limitedWidth"},
],
'rowCallback': function(row, data, index) {
// Set the STEP for ARCHIVE operation
lastStep = currentFlowsTable.data().count();
if($(row).find('.stepCell').text() === "") {
$(row).find('.stepCell').append(lastStep);
}
},
'drawCallback': function(settings){
createNodesAndEdges(flowChartJSON);
}
});
};
}

Disable sorting datatable

I am trying to disable sorting 'Empty' column.
I'm adding bSortable: false, targets: [0], orderable: false, but no luck.
$("#example").DataTable({
aaSorting: [],
bPaginate: true,
aaData: _vIntArrData,
aoColumns: [{
sTitle: ""
}, {
sTitle: "Category"
}, {
sTitle: "Name"
}, {
sTitle: "Audience / Coverage"
}],
columnDefs: [{
bSortable: false,
targets: [0],
orderable: false
}]
});
What is wrong? Any help is appreciated.

Use your code like below:
$("#example").DataTable({
"aaSorting": [],
"bPaginate": true,
aaData: _vIntArrData,
columns: [{
'sTitle': ''
}, {
'sTitle': 'Category'
}, {
'sTitle': 'Name'
}, {
'sTitle': 'Audience / Coverage'
}],
"columnDefs": [{
'bSortable': false,
'aTargets': [0],
'orderable': false
}],
});

You can try by adding bSortable to aoColumns
aoColumns: [{
sTitle: "",
"bSortable": false
}

Can this JavaScript be simplified?

I have a page containing multiple DataTables all using the same settings and server side processing script.
The code works but it seems bulky for what it is doing.
Is it possible to simplify it somehow?
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#table1').dataTable( {
"ajax": {
"url": "/old/server_processing/prices.php?ProductGroup=1",
"type": "POST"
},
"order": [[ 0, "asc" ]],
"serverSide": true
} );
$('#table2').dataTable( {
"ajax": {
"url": "/old/server_processing/prices.php?ProductGroup=2",
"type": "POST"
},
"order": [[ 0, "asc" ]],
"serverSide": true
} );
$('#table3').dataTable( {
"ajax": {
"url": "/old/server_processing/prices.php?ProductGroup=3",
"type": "POST"
},
"order": [[ 0, "asc" ]],
"serverSide": true
} );
$('#table4').dataTable( {
"ajax": {
"url": "/old/server_processing/prices.php?ProductGroup=4",
"type": "POST"
},
"order": [[ 0, "asc" ]],
"serverSide": true
} );
$('#table5').dataTable( {
"ajax": {
"url": "/old/server_processing/prices.php?ProductGroup=5",
"type": "POST"
},
"order": [[ 0, "asc" ]],
"serverSide": true
} );
} );
</script>

One way of simplifying is following
function bindDataTableEvent(index) {
$('#table' + index).dataTable( {
"ajax": {
"url": "/old/server_processing/prices.php?ProductGroup=" + index,
"type": "POST"
},
"order": [[ 0, "asc" ]],
"serverSide": true
} );
}
for (var i = 1; i <= 5; i++) {
bindDataTableEvent(i);
}

Another way is to give your datatables a certain class and to put the product group id as an attribute on the table i.e.
<table class='data-table' data-product-group-id='1'>
This way you don't have to keep track of the total # of tables whenever you add or remove tables and you can have gaps in your ids
$('.data-table').each(function() {
$(this).dataTable( {
"ajax": {
"url": "/old/server_processing/prices.php?ProductGroup="
+ $(this).attr('data-product-group-id'),
"type": "POST"
},
"order": [[ 0, "asc" ]],
"serverSide": true
});
});

There are plenty of good answers already, but this is neat as well:
[1, 2, 3, 4, 5].forEach(function(i) {
$('#table' + i).dataTable( {
"ajax": {
"url": "/old/server_processing/prices.php?ProductGroup=" + i,
"type": "POST"
},
"order": [[ 0, "asc" ]],
"serverSide": true
} );
});

You can remove repeated code by taking out all the common stuff into a function.
// Function for common task
function repeat(num) {
var tableId = '#table' + num;
var url = "/old/server_processing/prices.php?ProductGroup=" + num;
$(tableId).dataTable( {
"ajax": {
"url": url,
"type": "POST"
},
"order": [[ 0, "asc" ]],
"serverSide": true
});
}
// Call the function for required number of turns
for (var i=1; i<=5; i++) {
repeat(i);
}

Select/highlight entire row on checkbox click

I want to select entire row of the datatable. With the following code only the 0th(NAME) column from the data is being selected:
I do the following inside a success ajax function
mydtable.DataTable( {
aaData:result.users,
"aaSorting": [[1,'asc']],
"iDisplayLength": 25,
"bPaginate": true,
"sPaginationType": "full_numbers",
"scrollY":"350px",
"scrollCollapse": true,
"order": [ 1, 'asc' ],
"dom": 'T<"clear">lfrtip',
"oTableTools": {
"sRowSelect": 'multi',
"sRowSelector": 'td:first-child',
"aButtons": [ 'select_all', 'select_none', ]
},
"aoColumns":
[
{ "data": null, defaultContent: '', orderable: false},
{ "mData": 0 },
{ "mData": 1 },
{ "mData": 2 },
],
});

Have a look at this demo - http://live.datatables.net/kesijisi/1 - is this what you want it to do?