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.
Related
I'm implementing an sticky audio player on a website and it's working fine. However, I'd like to create a play button, OnClick maybe, in HTML that would give a play in the player when the user clicked on it. I tried several codes and none worked.
The last one was this and it did not work either.
<button type="button" onclick="$(this).myPlayer();">Play</button>
In addition to the Javascripts and external CSS, which are before HEAD, the script that runs the player on the page (inline) is this.
<script>
jQuery(function($) {
$('body').myPlayer({
firstPlaying: 0,
autoplay: false,
shuffle: false,
//veryThin: true,
slideAlbumsName: true,
nowplaying2title: true,
roundedCorners: true,
//accentColor:"#cc181e", //008DDE
pluginPath: "player/",
playlist: [
{mp3:"player/music/mymusic.mp3", title:"My Song", artist:"Mine", album:"Single", cover:"player/music/cover.png"}
]
});
});
</script>
From what I was researching, many articles mention using the HTML5 tag "data- *" inside the button code. However, I could not use it correctly.
If anyone can help me, I appreciate it.
I may not have understood your problem correctly, but here is a snippet you can try to get this working:
<button type="button" id="play-music">Play</button>
In your script, you can write something like this:
<script>
$(document).ready(function() {
$("#play-music").click(function() {
$('body').myPlayer({ ... }); // Your code here
});
});
</script>
Datatable fixed header when scrolling up and down like this link
$(document).ready(function() {
$('#student_datatable').DataTable( {
fixedHeader: true,
scrollX: true,
bSort : false
} );
} );
fixedHeader: true is doesn't work. can you help me ?
The link to fiddle in your question has nothing to do with DataTables.
It uses some css to implement fixed header functionality for a regular html table. In your case this css is useless.
For DataTables use the FixedHeader plugin
First of all you need to reference it by adding this to your html(in case that it is not already included):
<script src="https://cdn.datatables.net/fixedheader/3.1.1/js/dataTables.fixedHeader.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.1/css/fixedHeader.dataTables.min.css">
then
$('#student_datatable').DataTable({
fixedHeader: true
});
will work as expected (Working fiddle)
I had a few problems where the header moves about.
Use the dataTables_scrollHead class.
<table class="OTHER_CLASSES_HERE dataTables_scrollHead">
...
</table>
If you're having problems with datatables in modals (which I did), use the .draw() api when opening the modal.
Its easier to access the api like this when you have retrieve: true as a DT init obj option.
(ref).
I hope this helps,
Rhys
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();
});
Before anything else, let me say that I have looked at other similar questions here and I still can't figure this out.
I'm trying to build a website, using .NET MVC (razor) using a this free template I found online.
What I did, was to replace all the markup of my Index.chstml view with the html code of the template. Moved all the scripts and css files to the corresponding folders in my solution, and changed the html to correctly reference the new paths as required.
Needless to say that the original template works perfectly. But for some reason I really can't figure out I'm getting the error:
Uncaught TypeError: owl.owlCarousel is not a function
I looked at the developer tools (chrome) and the scrips are there, so the only thing I can think of is something related to the loading order. Off course I didn't change that, so I wonder if razor did it somehow.
This is how my script loading section looks like:
<script src="#Url.Content("~/Scripts/modernizr-2.6.2.min.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.easing.1.3.js")"></script>
<script src="#Url.Content("~/Scripts/bootstrap.min.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.waypoints.min.js")"></script>
<script src="#Url.Content("~/Scripts/owl.carousel.min.js")"></script>
<script src="#Url.Content("~/Scripts/main.js")"></script>
and the problem happens inside main.js, right here:
owl.owlCarousel({
items: 1,
loop: true,
margin: 0,
responsiveClass: true,
nav: true,
dots: true,
autoHeight: true,
smartSpeed: 500,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
navText: [
"<i class='icon-arrow-left2 owl-direction'></i>",
"<i class='icon-arrow-right2 owl-direction'></i>"
]
});
Thanks to everyone in advance.
Well, I feel a bit ashamed, but looks it was just a conflict between the scripts that the template uses, with the ones MVC razor includes by default.
I commented this at the Layout partial view:
##Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")#
and voila! I realized that my code was loading more scripts than the original template.
Thanks everybody.
I'm having an issue with jscrollpane loading into a div using the following function:
$(document).ready(function() {
$("#shopping").click(function(event){
$('#stage').hide();
$('#stage').load('pages/shopping.html', {}, function() { $(this).fadeIn(800); });
The above code is on the index page and I'm calling up the "shopping page" as you can see above.
I have four other links that call up pages, one page has a slideshow and I managed to load that one into the div simply by eliminating the Jquery repository link, but this page doesn't want to know.
On the "shopping" page I have the following script, I've searched most of the web and also on here, without success, but nobody else's solutions have worked for me.
What am I doing wrong?:
<script type="text/javascript" src="./js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="./js/jquery.jscrollpane.min.js"></script>
<link type="text/css" href="./css/jquery.jscrollpane.mod.css" rel="stylesheet" media="all" />
<script>
$(function()
{
$('.horizontal-only').jScrollPane(
{
showArrows: true,
arrowScrollOnHover: true,
horizontalArrowPositions: 'split',
hijackInternalLinks: false
}
);
});
Ok...
After some digging and trial and error, I've found the solution to my problem, hunting on the web and stack, I found something that worked and I thought for all those that are complete noobs, like me, in javascript and Jquery I'd post my findings.
Current call up on index page:
$(document).ready(function() {
$("#shopping").click(function(event){
$('#stage').hide();
$('#stage').load('pages/shopping.html', {}, function() { $(this).fadeIn(800); });
I added the following to my index page (this is the page that is calling up the other pages)
to the link of a specific page add:
$.ajaxSetup({async:false});
then add the jScrollPane function after your call up e.g:
$('#stage').jScrollPane(
{
showArrows: true,
arrowScrollOnHover: true,
horizontalArrowPositions: 'split',
hijackInternalLinks: false
}
);
So altogether it looks like this:
$(document).ready(function() {
$("#shopping").click(function(event){
$('#stage').hide();
//--added the async code here--//
$.ajaxSetup({async:false});
$('#stage').load('pages/shopping.html', {}, function() { $(this).fadeIn(800); });
//--moved the jscrollPane from the page I was calling to the index page code here--//
$('#stage').jScrollPane(
{
showArrows: true,
arrowScrollOnHover: true,
horizontalArrowPositions: 'split',
hijackInternalLinks: false
}
);
This seems to be working for me at the moment, now I just need to re-edit some css and it's good to go.
I've found another workaround:
I've added the following code to the index.html:
$(function()
{
var api = $('.horizontal-only').jScrollPane(
{
showArrows: true,
arrowScrollOnHover: true,
horizontalArrowPositions: 'split',
hijackInternalLinks: false
}
).data('jsp');
$('#shopping').bind(
'click',
function()
{
api.getContentPane().load(
'pages/shopping.html',
function()
{
api.reinitialise();
}
);
return false;
}
);
});
I also made the jsp load in a separate div layer, as it was causing some styling conflicts and i can't determine where the issue is but this works.
What I also had to do is hide the new div layer from the other calls
so basically:
$(#scroller).hide();
Thanks, I'm sure this isn't the best way, but as i've only had one reply on this issue, which was a question, think I've done rather well for a noob.