I use bootstrap for tabs on my pages. Inside these tabs are JQuery Data Tables. For some reason when a user clicks a tab after the page has loaded the data table's headers do not allign with the rows.
If I click one of the headers (the button that orders the column) then the columns fix themselves. Can anybody help me out here? I've tried several CSS and Javascript "hacks" to fix this.
Here's where I initialize my data table:
$( ".dynamic-table" ).DataTable({
"scrollY": 450,
"scrollCollapse": true,
"lengthMenu": [[10, 50, 500, -1], [10, 50, 500, "All"]]
});
SOLUTION
Use columns.adjust() API method to recalculate columns widths.
From the manual:
Call it when the table becomes visible if hidden when initialized (for example in a tab) or when the data changes significantly.
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
$($.fn.dataTable.tables(true)).DataTable()
.columns.adjust();
});
DEMO
See this jsFiddle for code and demonstration.
LINKS
See jQuery DataTables – Column width issues with Bootstrap tabs for solution to the most common problems with jQuery DataTables and Bootstrap Tabs.
I found a solution. This will sort the first th programatically on tab click thus fixing the unalligned headers. It does it twice in order to bring the order back to way it was originally.
/* FIX FOR COLUMNS BEING UNALLIGNED */
$(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
var activeTabPanel = $('.tab-pane.active');
activeTabPanel.find("th:first").click();
activeTabPanel.find("th:first").click();
});
Related
Essentially I have some datatable like this: Now for some reason when I go to the second page, none of the buttons I have are working. Like when I click them nothing happens! But on the first page they work perfectly! Not sure how to fix this issue! [enter image description here][1]
//creation method of the table
var volunteerTable = $('#volunteerTable').DataTable({
paging: true,
pagingType: 'simple_numbers',
columns: [ title:"First Name", title:"Last Name", title:"Email"
The trash can button code:
$('.buttonVDelete').click(function () {
//fill out the fields
//open the delete volunteer modal
//prepare data to send
}
When you use click() you are reading the elements available at the moment of loading the page.
In order to read new rendered elements, you must use on
$(document).on('click','.buttonVDelete', function () {
// Your code
});
is it jQuery required? maybe better vanilla javascript:
document.querySelector('.buttonVDelete').addEventListener('click',
function(){
})
Most of modern browser can easy deal with es5/es6
I hope I helped.
I seem to have a problem with the way jQuery-UI tabs and Datatables work together. I want to create a table that is scrollable and has information from a database.
When I enter the page for the first time it looks like this.
As you can see it looks like a normal table instead of one from Datatables.
When I reload the page again it looks like this.
This is roughly how I want it to look upon first load.
It also seems that it only works for the first table on the page.
I tested this multiple times on multiple pages with the same results.
I'm assuming this problem is because of jQuery-UI seeing as on another page it work perfectly and when I load in the page without jQuery-UI it works aswell.
This is the code:
//jQuery-UI
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
//DataTables
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
$(function() {
$('table.scrollable').DataTable({
"scrollY": "240px",
"scrollX": true,
"scrollCollapse": true,
"paging": false
});
});
</script>
The HTML is just a standard table loaded in through a while loop from a database.
To decrease loading times I've set up jQuery-UI in a way that it loads seperate files when a tab is clicked so that no unnecessary things are loaded at the start.
Any piece of help would be much appreciated thanks!
EDIT: Wanted to make a JSFiddle showcasing my problems but it basically works perfect there so I'm guessing the problem comes from the fact that I load it as seperate pages.
JSFiddle
I would advise the following code, expanding upon my comment.
$(function() {
$("#loading-voertuigen").show();
if ($(window).width() <= 1600) {
$('table.scrollable').DataTable({
"scrollY": "240px",
"scrollX": true,
"scrollCollapse": true,
"paging": false
});
} else {
$('table.scrollable').DataTable({
"scrollY": "240px",
"scrollCollapse": true,
"paging": false
});
}
$(window).resize(function() {
location.reload();
});
});
You were using $(document).ready() and it is not needed. The use of $(function(){}) already causes the jQuery to execute after the page is ready.
If need further help, please edit your post and include a more complete example.
I have a DataTable with FixedHeader option that has the following initialization populated in my $(document).ready function. Both the headerOffset values that are jquery looked-up and hard-coded at 40 have been attempted, with the same results.
"fixedHeader": {
// "headerOffset": $("#top-navbar").outerHeight()
"headerOffset": 40
},
The DataTable is populated from an ajax call and has a series of my own render: functions on half of the columnDefs but I don't think that's related.
I'm not sure why, but the first time the page is loaded, the fixedHeader doesn't follow the top of the screen - but is sitting at the very bottom of the page below the table. When I click refresh - the header works just fine.
Any thoughts?
Thanks in advance.
I had the same problem, and in the absence of a satisfactory solution, my current workaround is to trigger a window resize event that will make the Datatable make rendering recalculations:
table.DataTable({
// ...
drawCallback: function() {
$(window).resize();
}
});
I am having a few problems working with DataTable jQuery plug-in in my project. There are more than 20 tables using DataTable. Below is the javascript placed on every page that are using table with DataTable.
$(document).ready(function() {
pageSetUp();
var responsiveHelper_datatable_fixed_column = undefined;
var breakpointDefinition = {
tablet : 1024,
phone : 480
};
var otable = $('#datatable_fixed_column_GroupEnquiry').DataTable({
"stateSave": true, // saves state using localStorage
"sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6 hidden-xs'f><'col-sm-6 col-xs-12'<'toolbar'>>r>"+
"t"+
"<'dt-toolbar-footer'<'col-xs-12 col-sm-6 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
"autoWidth" : true,
"oLanguage": {
"sSearch": '<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>'
},
"preDrawCallback" : function() {
// Initialize the responsive datatables helper once.
if (!responsiveHelper_datatable_fixed_column) {
responsiveHelper_datatable_fixed_column = new ResponsiveDatatablesHelper($('#datatable_fixed_column_GroupEnquiry'), breakpointDefinition);
}
},
"rowCallback" : function(nRow) {
responsiveHelper_datatable_fixed_column.createExpandIcon(nRow);
},
"drawCallback" : function(oSettings) {
responsiveHelper_datatable_fixed_column.respond();
}
});
otable.state.clear(); //to clear saveState, but only work if the page is load for the second time
// Apply the filter
$("#datatable_fixed_column_GroupEnquiry thead th input[type=text]").on( 'keyup change', function () {
otable
.column( $(this).parent().index()+':visible' )
.search( this.value )
.draw();
} );
});
Situation
The tables work perfectly with saveState. When user go to specific page (example: page 5), and click on view detail (load new detail page), and click back button (load previous page with table) and the table still stays on the current page (page 5). This is what I want.
Problem
When user clicks on the navigation and redirect to the table, it still loads the table with previous state (which is in page 5) instead of display the 1st page and without any search filter.
Expected result
Supposed when user click on navigation and load table, the table should be display fresh state (on page 1 and without any search filter).
Attempt:
I placed otable.state.clear() as the code provided above, to clean the saveState of the table when user clicked navigation and display table. But it behaves weirdly, it only works on the second clicks on navigation.
I have no idea how actually saveState works and it is necessary to give unique id (#datatable_fixed_column_GroupEnquiry) for each table? I have more than 20 tables in different pages. How to clean saveState on specific button (navigation) and loads a fresh state table.
If anyone else searching for the solution, this helped for me.
I had the case that i wanted to clear the state when I access the dataTable with a link or pressed on refresh.
I put the followed piece of code, above the init of the dataTable inside the $(document).ready()
if (performance.navigation.type != 2){ //checks if page is accessed through a link or refresh
var table = $('#orderHistoryTable').DataTable();
table.state.clear();
table.destroy(); // need to destroy the table, I don't know why..
}
$.noConflict();
jQuery(document).ready(function ($) {
var options = {
sortList: [
[1, 1]
],
theme: 'ice',
widgets: ['zebra', 'cssStickyHeaders'],
};
$("#myTable").tablesorter(options);
});
I use tablesorter and need to use cssStickyHeaders widget but I have two problems that I could not fix.
1) I have another sticky header on my page, and I need this tables sticky header to appear under it. I tried to understand widget options parameters from here but could not make it work.
2) CSS does not update automatically, so I have to turn on and off the developer tools in browser to make it work, to make the header move. In example everything works but it doesn't work with my page, though I do everything in the same way as it is presented in the example.
I am new to javascript. I hope someone will help me.