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
}

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?

Filtering Datatables by Slider Values not working

I've got a datatables table working great and now I'd like to add an additional element. The user can move a slider to select a range, click search, and the table returns only those rows with a specific column value within the range.
Here's the script for the filtering:
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var min = parseInt( $('.leftLabel').val(), 10 );
var max = parseInt( $('.rightLabel').val(), 10 );
var score = parseFloat( data[11] ) || 0;
if ( ( isNaN( min ) && isNaN( max ) ) ||
( isNaN( min ) && score <= max ) ||
( min <= score && isNaN( max ) ) ||
( min <= score && score <= max ) )
{
return true;
}
return false;
}
);
$(document).ready(function() {
$('#slider_search').click(function () {
var table = $('#total_datatable').DataTable();
table.draw();
} );
});
And here's the script to originally draw the table:
$(document).ready(function() {
$("#total_datatable").DataTable({
"serverSide": true,
"ajax": {
"url":"compare_2.php",
"type":"GET"
} ,
"paging": true,
"pageLength": 100,
"order": [[ 10, "asc" ],[11,"desc"],[1,"asc"]],
"aoColumns": [
{ "bSortable": true, "width": "0%", "sClass": "lang_body_2", "sTitle": "Provider ID" },
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Hospital Name" },
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Address","visible":false },
{ "bSortable": true, "width": "20%","sClass": "lang_body_2","sTitle": "City" },
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "State",},
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "ZIP Code"},
{ "bSortable": true, "width": "20%","sClass": "lang_body_2","sTitle": "County","visible":false },
{ "bSortable": true, "width": "0%", "sClass": "lang_body_2", "sTitle": "Phone","visible":false },
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Condition"},
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Measure ID"},
{ "bSortable": true, "width": "20%","sClass": "lang_body_2","sTitle": "Measure Name" },
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Score",},
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Sample"},
{ "bSortable": true, "width": "20%","sClass": "lang_body_2","sTitle": "Footnote","visible":false },
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Measure Start","visible":false },
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Measure End","visible":false },
{ "bSortable": true, "width": "20%","sClass": "lang_body_2","sTitle": "Index","visible":false },
],
"sDom": 'f<"clear">rtip',
});
});
The slider values are populated in here:
<div class="leftLabel" style="display:inline-block;"></div>
<div class="rightLabel" style="display:inline-block;"></div>
What should happen is that after you select the slider values and click the #slider_search button, the table should redraw with the same settings as the original table, but filtered to the specific rows. I've used this range filtering before and my script is based off of this. I tried doing it with input boxes like the Datatables example and it works, but I want it to work based on the slider values and only when the user clicks search (the example updates the table as soon as you input).
So, the question is: What am I doing wrong that's causing this not to work in the manner that I'm looking for?
Any direction would be appreciated.

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.