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

How to reuse Datatable Options

I want to create a dynamic system for Datatables.
I have this code where I attribute to all elements with the class "my-datatable" the DataTable main options. Next I want to add options for a specific Datatable.
$(".my-datatable").DataTable({
responsive: true,
dom: 'Bfrtip',
buttons: [
'csv',
'excel',
'pdf',
],
"language": {
"search": "",
"searchPlaceholder": "Search for any client’s information…",
"emptyTable": "No data available in table",
"info": "",
"infoEmpty": "Showing 0 to 0 of 0 entries",
"infoFiltered": "(filtered from _MAX_ total entries)",
"lengthMenu": "Show _MENU_ entries",
"loadingRecords": "Loading...",
"processing": "Processing...",
"zeroRecords": "No matching records found",
},
});
$(".my-datatable#specific-datatable").DataTable({
"order": [[ 1, "asc" ]],
columnDefs: [
{ targets: [0,2,4,5,7], orderable: false },
],
"columns": [
{ "width": "5%" },
{ "width": "20%" },
{ "width": "10%" },
{ "width": "5%" },
{ "width": "20%" },
{ "width": "10%" },
{ "width": "15%" },
{ "width": "20%" },
]
});

$.extend can be applied in this case. After declaring the option of the first table, extend specific table property by the option using $.extend as following
var originalTableOption = {
responsive: true,
dom: 'Bfrtip',
buttons: [
'csv',
'excel',
'pdf',
],
"language": {
"search": "",
"searchPlaceholder": "Search for any client’s information…",
"emptyTable": "No data available in table",
"info": "",
"infoEmpty": "Showing 0 to 0 of 0 entries",
"infoFiltered": "(filtered from _MAX_ total entries)",
"lengthMenu": "Show _MENU_ entries",
"loadingRecords": "Loading...",
"processing": "Processing...",
"zeroRecords": "No matching records found",
},
};
$(".my-datatable").DataTable(originalTableOption);
var specificTableOnlyOption = {
"order": [[ 1, "asc" ]],
columnDefs: [
{ targets: [0,2,4,5,7], orderable: false },
],
"columns": [
{ "width": "5%" },
{ "width": "20%" },
{ "width": "10%" },
{ "width": "5%" },
{ "width": "20%" },
{ "width": "10%" },
{ "width": "15%" },
{ "width": "20%" },
]
};
var specificTableOption = $.extend(specificTableOnlyOption, originalTableOption);
$(".my-datatable#specific-datatable").DataTable(specificTableOption);

Datatable Nested table

I'm trying to do a master-detail with datatable, but the responsive detail table is not working. and the detail is as if it were another row, but what I want is to be a separate table, to be able to do things with it.
This is my code
HTML
<table class="table table-striped table-bordered dt-responsive nowrap table-hover " id="ListaControlCacao" width="100%" aria-describedby="DataTables_Table_0_info" role="grid">
<thead>
<tr role="row">
<th></th>
<th>Puesto de observación</th>
<th>Fecha</th>
<th>Observador</th>
<th>Boton floral</th>
<th>Floracion</th>
<th>Maduracion</th>
<th>Fructificacion</th>
<th>Valoración</th>
<th>Rendimiento</th>
<th>Enfermedades</th>
<th>Plagas</th>
</tr>
</thead>
<tbody></tbody>
</table>
JAVASCRIPT
var ListaControlCacao = $('#ListaControlCacao').DataTable({
"ajax": "/PuestoObservacionCacao/ListaPuestoObservacionCacaoxUsuario",
//"lengthMenu": [[10, 20, 30, -1], [10, 20, 30, "All"]],
dom: 'rtip',
select: 'single',
rowId: 'Id',
deferRender: true,
responsive: true,
language: LenguajeDataTable,
"columns": [
{
"Width": 2,
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "PuestoObservacionCacao" },
{ "data": "Fecha" },
{ "data": "Observador" },
{ "data": "BotonFloral" },
{ "data": "Floracion" },
{ "data": "Maduracion" },
{ "data": "Fructificacion" },
{ "data": "Valoracion" },
{ "data": "Rendimiento" },
{ "data": "Enfermedades" },
{ "data": "Plagas" }
]
});
$('#ListaControlCacao tbody').on('click', 'td', function () {
if ($(this).index() == 0) {
return;
}
var tr = $(this).closest('tr');
var row = ListaControlCacao.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format()).show();
tr.addClass('shown');
var xyz = $('#ListaDetalleControlCacao').DataTable({
"bServerSide": true,
"sAjaxSource": "/Cacao/ListarControlCacao3?IdPuestoObservacion=" + row.data().Id,
"bProcessing": true,
"pageLength": 10,
//"lengthMenu": [[10, 20, 30, -1], [10, 20, 30, "All"]],
dom: 'rtip',
select: 'single',
rowId: 'Id',
deferRender: true,
"responsive": true,
buttons: [
{
extend: 'colvis',
columns: ':not(:first-child)'
},
'copy',
'csv',
'excel',
'pdf',
'print'
],
language: LenguajeDataTable,
"aoColumns": [
{
"sName": "Id",
"bSearchable": true,
"bSortable": true
},
{ "sName": "Fecha" },
{ "sName": "Observador" },
{
"sName": "BotonFloral",
"sWidth": 2
},
{
"sName": "Floracion",
"sWidth": 2
},
{
"sName": "Maduracion",
"sWidth": 2
},
{
"sName": "Fructificacion",
"sWidth": 2
},
{ "sName": "ValoracionCultivo" },
{ "sName": "RendimientoCultivo" },
{ "sName": "Enfermedades" },
{ "sName": "Plagas" }
]
});
}
});
function format() {
return ' <div class="table-responsive"> <table id="ListaDetalleControlCacao" class="table table-striped table-bordered display responsive dt-responsive nowrap table-hover"><thead><tr><th>No.</th><th>Fecha</th><th>Observador</th><th>Boton Floral</th><th>Floracion</th><th>Maduracion</th><th>Fructificacion</th><th>Valoracion</th><th>Rendimiento</th><th>Enfermedades</th><th>Plagas</th></tr></thead><tbody></tbody></table> </div>';
}
And that's how it looks:

dataTable with multi-column ordering with "asc" and "desc"

i have a dataTable with multi-column ordering and it works but I need:
first column "asc" and second column desc -> how is this possible?
here is my fiddle: https://jsfiddle.net/zukii/Lucq6vc5/28/
in this fiddle the column "Rating" is automatic default sorting "asc" and then the column "Price" should be automatic "desc"
var mytable = $('table.dt-tarif').dataTable({
"paging": false,
"info": false,
"searching": false,
"order": [[ 3, "desc" ]],
"aoColumnDefs": [
{
"bSortable": false,
"aTargets": [0]
},
{
"type": "currency", targets: 3
},
{
targets: [ 3 ],
orderData: [3, 4]
}
],
"language": {
"lengthMenu": "Zeige _MENU_",
"zeroRecords": "Keine Entwürfe vorhanden!",
"info": "Seite _PAGE_ von _PAGES_",
"infoEmpty": "Es konnte kein Entwurf gefunden werden.",
"infoFiltered": "",
"search": " ",
"paginate": {
"first": "Erste",
"last": "Letzte",
"next": "Vor",
"previous": "Zurück"
},
}
});
thanks and greetings ;)

You needs to use a 2D array to achieve multi-column sorting to archive the result.
var table = $('table.dataTable').DataTable();
table
.order( [ 3, 'asc' ],[ 4, 'desc' ] )
.draw();
further you can change the format [ columnIndex, "asc|desc" ] (e.g. [ 1, "desc" ] for sorting .
Solution fiddle: https://jsfiddle.net/ShirishDhotre/a3utn0ek/7/
Check if this help to close your issue.

This one is working perfect now :)
https://jsfiddle.net/zukii/Lucq6vc5/37/
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"currency-pre": function ( a ) {
a = (a==="-") ? 0 : a.replace( /[^\d\-\.]/g, "" );
return parseFloat( a );
},
"currency-asc": function ( a, b ) {
return a - b;
},
"currency-desc": function ( a, b ) {
return b - a;
}
} );
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"currency": function ( a ) {
var x = a.replace(",", ".").replace("€", "");
return parseFloat( x );
}});
var mytable = $('table.dt-tarif').dataTable({
"paging": false,
"info": false,
"searching": false,
"order": [[ 3, "desc" ]],
"aoColumnDefs": [
{
"bSortable": false,
"aTargets": [0]
},
{
"type": "currency", targets: 3
},
{
targets: [ 3 ],
orderData: [3, 4]
}
],
"language": {
"lengthMenu": "Zeige _MENU_",
"zeroRecords": "Keine Entwürfe vorhanden!",
"info": "Seite _PAGE_ von _PAGES_",
"infoEmpty": "Es konnte kein Entwurf gefunden werden.",
"infoFiltered": "",
"search": " ",
"paginate": {
"first": "Erste",
"last": "Letzte",
"next": "Vor",
"previous": "Zurück"
},
}
});

you can use:
"order": [ [ 1, "asc" ], [ 3, "desc" ] ],

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?