We Keep Coding

JavaScript Datatable.JS / PHP MySQLi Sorting Issue

So I'm using Datatables.JS to create a table of results returned from a MySQL database. When I return the results I'm trying to display them in DESC order. I have tried using ORDER BY DESC in my MySQLi query, this does return the results in the correct order, however when datatables is reading the results it's displaying them in some random order. So I've tried playing with the datatable settings to sort by my ID column but keep that column hidden. Whenever I attempt to add any code to handle the sorting, the sorting issue itself becomes resolved but all my pagination and buttons such as the buttons that allow the user to select which columns they would like to view just disappear. Below is the JS I'm using to select the features and setup I need for this datatable, can anyone show me how to add sorting by the ID column DESC into this without breaking it?
$(document).ready(function() {
$('#datatable').DataTable();
//Buttons examples
var table = $('#datatable-buttons').DataTable({
pageLength: 20,
lengthChange: false,
searching: false,
buttons: ['copy', 'excel', 'pdf', 'colvis']
});
table.buttons().container()
.appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)');
} );
Adding ordering: and then selecting the column and defining the order seems to break all the other settings, I lose my pagination and default results length as well as all control buttons on the page.
$(document).ready(function() {
$('#datatable').DataTable();
//Buttons examples
var table = $('#datatable-buttons').DataTable({
pageLength: 20,
lengthChange: false,
searching: false,
buttons: ['copy', 'excel', 'pdf', 'colvis'],
order: [[ 1, desc ]]
});
table.buttons().container()
.appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)');
} );

I have no idea why this solutions works and I still don't understand what caused the original problem but I did find a working piece of code posted under a loosely relevant problem on another forum. I combined that code with what I had already and it solved my problem. Hopefully this helps someone else out who may encounter the same issue.
$(document).ready(function() {
$('#datatable-buttons').DataTable( {
pageLength: 20,
lengthChange: false,
searching: false,
ordering: true,
order: [[ 3, 'DESC' ]],
dom: 'B1frtip',
buttons: [
'copy',
'excel',
'pdf',
'colvis'
]
});
table.buttons().container()
.appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)');
});
Just wanted to mention this JS was for a datatable that's part of the Fonik Bootstrap Admin Template.

Remove horizontal scrollbar under fixed columns DataTables

I'm combining a complex header and fixed columns:
1) complex header: https://datatables.net/examples/basic_init/complex_header.html
2) fixed columns: https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html
It works fine but is there a way to remove the scrollbar from the fixed header columns? I've outlined the bit I'd like to remove.
Basically, I want to make it like this: https://jsfiddle.net/brianlmerritt/8c5jgs4b/ but with DataTables and complex header.
Here's my own fiddle: https://jsfiddle.net/omgLswq6/151/
$(document).ready(function () {
$('#compareResults').DataTable({
paging: false,
ordering: false,
info: false,
scrollX: true,
fixedColumns: {
leftColumns: 5
}
});
});

I was able to resolve this by changing the overflow style to be hidden in the fixed left column container:
.DTFC_LeftBodyLiner {
overflow: hidden;
}
<div class="DTFC_LeftBodyLiner">
<table class="foo_datatable">
...
</table>
</div>

Dropdown inside datatable elements with pagination

I am new to data-tables and I am trying to do this but i wanted to do with pagination since the answer provided in the link did not involve any pagination. Is it possible? Because i have tried and when i set the pagination to true, the drop-down solution in the link given won't work.
<script type="text/javascript">
$(document).ready(function() {
$('#datatable-responsive').DataTable( {
"responsive": true,
"paging": true,
"dom": 't<"margin-dataTable-bottom"<"pull-left margin-dataTable-pagination">>'
} );
} );
</script>

You can try this alternative solution which is an extensible pagination mechanism in datatable,
$(document).ready(function() {
$('#example').DataTable( {
"pagingType": "full_numbers"
} );
} );
Please find below link for more details:
https://datatables.net/examples/basic_init/alt_pagination.html

Lazyload cutting off image height when dynamic height is turned on

When I enable Lazyload on my image slideshow with the dynamic height enabled, it cuts off and only shows a fraction of the photo height, I have attached a screenshot, if the initial load you can view the images perfectly, please use the toggle arrows and you will be able to see what I mean.
I have been trying various fixes to no avail and as this was a html theme I purchased, unfortunately, the theme author has also not been able to help me, your help will be much appreciated.
The JS I have in my custom script file is:
$(".property-carousel").owlCarousel({
rtl: _rtl, items: 1, lazyLoad : true,
responsiveBaseWidth: ".property-slide", dots: false,
autoHeight: true, nav: true, navText: ["", ""], loop: true
});

I also had this problem, "lazyLoad" combined with "autoHeight" cut off some images because the lazy-loaded images' heights weren't taken into account by the owl carousel. For me, this works (modification of the answer from #baduga):
var myCarousel = $(".property-carousel").owlCarousel({
lazyLoad : true,
autoHeight: true
});
myCarousel.on('loaded.owl.lazy', function(event) {
myCarousel.trigger('refresh.owl.carousel');
});

try to add auto height on function
owlCarousel({
items: 1,
loop: true,
autoHeight: true
});
set auto height true
autoHeight: true

You need to set lazyload true in OwlCarousel:
lazyLoad: true
Go to the documentation for more.

Here's my solution of the problem:
gallery.owlCarousel({
margin:5,
loop:false,
autoHeight:true,
items:1,
nav: false,
dots: false,
lazyLoad:true
});
gallery.on('loaded.owl.lazy', function(event) {
$(this).find('.owl-item.active img').one('load', function () {
gallery.trigger('refresh.owl.carousel');
});
});

DataTables Javascript Library - Headers Not Lining Up - Data Shifting

I'm using the Datatables javascript library to display data.
When the search returns a lot of data, it seems to work okay.
If you stretch the window out far enough, it won't actually line up properly, but it's "usable" for the most part.
Unfortunately, when it doesn't return much data, the center data shifts as seen here:
I sort of managed to get it to work in the past by setting bAutoWidth to false, but then it broke the headers when more data was returned -_-
I've been fighting this for weeks, so any help would be appreciated.
Initialization code:
dtTable = $("#CompletedSitesTable").DataTable({
"scrollY": "50vh",
"scrollX": "auto",
"paging": true,
"pageLength": 100,
"bScrollCollapse": true,
"bAutoWidth": true,
"order": [[ 7, "asc" ]],
dom: "Bfrtip",
buttons: [
'copy', 'excel',
{
extend: 'pdfHtml5',
orientation: 'landscape',
}
]
});

Well I wasn't sure I would get much response from this, but what I did was completely hacky.
On fnInitComplete I simply check to see if the datatable has a scrollbar and, if not, I set the width of the div to the width of the headers.
I guess you would change #resultsDiv to whatever your wrapper div was and
Function to check for scroll bar:
(function($) {
$.fn.hasScrollBar = function() {
return this.get(0).scrollHeight > this.height();
}
})(jQuery);
The fnInitComplete code.
"fnInitComplete": function(oSettings, json) {
if(!$(".dataTables_scrollBody").hasScrollBar())
$("#resultsDiv").css({ "max-width": $(".dataTable").width()});
}
I guess this will get left like this for now - seems really dumb.