jquery datatable set width upon initialization - javascript

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

Related

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

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
}

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.

DataTable fix width with vertical scroll bar

I am using DataTable.
I have following tables:
Table 1
Table 2
This is my initialization code:
$('#invoice-content-table').dataTable({
"bPaginate": false,
"sScrollY": "150px",
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"bAutoWidth": false,
"bDestroy": true,
"aoColumns": [{
"sWidth": "170px"
}, {
"sWidth": "30px"
}, {
"sWidth": "30px"
}, {
"sWidth": "40px"
}, {
"sWidth": "25px"
}, {
"sWidth": "25px"
}, {
"sWidth": "25px"
}, {
"sWidth": "25px"
}, {
"sWidth": "25px"
}, {
"sWidth": "30px"
}, {
"sWidth": "50px"
}
]
});
Is there a way to fix scroll-y to scroll even if it does not contains any data ?

Categories