We Keep Coding

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
}

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" ] ],

jquery datatable set width upon initialization

I'm trying to set the width of a cell in a jQuery datatable upon initialization and it never seems to work. I've have tried what the official site recommends and other examples. Below are some of the options I have tried. Please help on what I'm doing wrong?
Ex: 1
$('#dataTables-comments').DataTable({
"bLengthChange": false,
"bFilter": false,
"iDisplayLength": 5,
"aoColumns": [{
"sWidth": "50%"
},
{
"sWidth": null
},
{
"sWidth": null
},
{
"sWidth": null
},
{
"sWidth": null
}
],
"responsive": true
});
Ex: 2
$('#dataTables-tbl').DataTable({
"bLengthChange": false,
"bFilter": false,
"iDisplayLength": 5,
"columnDefs": [{
"width": "50%",
"targets": 0
}],
"responsive": true
});
Ex: 3
$('#dataTables-tbl').DataTable({
"bLengthChange": false,
"bFilter": false,
"iDisplayLength": 5,
"columns": [{
"width": "50%"
}, {
"width": "10%"
}, {
"width": "10%"
}, {
"width": "10%"
}, {
"width": "10%"
}],
"responsive": true
});

As with any other usage of a CSS percentage value, the value must be a percentage of something. If the table itself not have a defined width, then 10% is untranslatable. So give your table a width :
#dataTables-comments {
width: 800px;
}
and be sure to turn off autoWidth so dataTables not begin to overrule the predefined column widths :
$('#dataTables-tbl').DataTable({
autoWidth: false, //<---
"bLengthChange": false,
"bFilter": false,
"iDisplayLength": 5,
"columns": [{
"width": "50%"
}, {
"width": "10%"
}, {
"width": "10%"
}, {
"width": "10%"
}, {
"width": "10%"
}],
"responsive": true
});

Cant get my datatable to appear was working fine

This probably just needs another pair of eyes as I am missing something simple. Everything was working and I think I did something simple someplace.
$(document).ready(function () {
$('#dblist').on('change', function () {
var selected = $("select option:selected").text();
tablefill(selected);
});
$('#search').click(function () {
var selected = $("select option:selected").text();
tablefill(selected);
});
function tablefill(selected) {
$('#sbar').show();
$('#table_id').dataTable({
"sAjaxSource": '/php/connect/searchtablequery.php',
"bProcessing": true,
"sScrollY": "500px",
"bDeferRender": true,
"bDestroy": true,
"sAjaxDataProp": "",
"fnServerParams": function (aoData) {
aoData.push({ "name": "db", "value": selected });
},
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [1] }
],
"aoColumns": [
{ "mData": "calldate" },
{ "mData": "recordingfile" },
{ "mData": "uniqueid" },
{ "mData": "src" },
{ "mData": "did" },
{ "mData": "lastapp" },
{ "mData": "dst" },
{ "mData": "disposition" },
{ "mData": "duration" },
{ "mData": "userfield" },
{ "mData": "accountcode"}],
"iDisplayLength": 20,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<"H"Tfr>t<"F"ip>',
"oTableTools": {
"sSwfPath": "/DataTables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
"aButtons": [
"copy", "csv", "xls", "pdf",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": ["csv", "xls", "pdf"]
}
]
}
});
}
});
If you see any improvements or useless code do tell me aswell, I am always looking to learn.