Disable sorting datatable - javascript

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
}

Related

ui-grid sort data after filter

I have this model containing labels in the user selected language.
"status": [{
"id": "IN_PROGRESS",
"label": "In progress"
}, {
"id": "KO",
"label": "Everything is KO"
}, {
"id": "OK",
"label": "Everything is OK"
}]
Data from server:
myService.data =[{
status:"OK",
history:"History 2"
},{
status:"IN_PROGRESS",
history:"History 3"
},{
status:"KO",
history:"History 4"
}
]
In my controller I have the following:
vm.myList = {
enableColumnMenus: false,
enableHorizontalScrollbar: 0,
enableVerticalScrollbar: 0,
enableRowSelection: false,
enableRowHeaderSelection: false,
multiSelect: false,
paginationPageSizes: [6],
paginationPageSize: 6,
useExternalSorting: false,
paginationTemplate: "views/templates/grid-custom-pager.html",
columnDefs: [{
displayName: "recording.status",
field: 'status',
headerCellFilter: 'translate',
cellFilter: 'translate',
sortCellFiltered: true,
cellTemplate: '<div class="ui-grid-cell-contents" translate-field="status" translate-value="COL_FIELD"></div>'
},
{
displayName: "recording.history",
field: 'history',
headerCellFilter: 'translate'
}],
data: myService.data}
When I press the header cell for sorting, the sort is made by the field value, not by the displayed value. Is there any way of sorting the column after the filtering is done?
Have you tried creating your own sorting algorithm? See the wiki page of the project Sorting in Ui-Grid

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

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?

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.

Categories