We Keep Coding

How to call Datatable csv button from custom button

Need to call csv button from my custom button.
<button value="Export report to Excel" class="button-default datatable-csv" type="button" id="ExportReporttoExcel">
<span>Export report to Excel</span>
</button>
Instead of calling it from the Datatable button, i want the same functionality from the above button.
Looking for some configuration changes in Datatable so that i can call my custom button to export the table records as csv.
var table=$('#tableId').DataTable( {
"paging": true,
"info": true,
"searching": true,
,buttons: true
});
$("#SEARCH").on("keyup search input paste cut", function() {
table.search(this.value).draw();
});
var buttons = new $.fn.dataTable.Buttons(table, {
buttons: [
'csvHtml5'
]
}).container().appendTo($('#ExportReporttoExcel'));
Getting output like below but i need only one button.

At last i found the solution.
In Datatable configuration , i added click event for the button to be triggered.
buttons: [
{
extend: 'csv',
}
]
$("#ExportReporttoExcel").on("click", function() {
table.button( '.buttons-csv' ).trigger();
});
This works fine for me thanks for the comments and answers

dataTables export buttons is by default enriched with signature classes like .buttons-excel, .buttons-pdf, .buttons-csv and so on. Take advantage of that :
$('#ExportReporttoExcel').on('click', function() {
$('.buttons-excel').click()
});

Say you have your own button
Export Excel
And you have your table that you are using the below code for;
$(document).ready(function () {
var table = $('#example').DataTable({
"paging": false,
"info": false,
searching: false,
dom: 'Bfrtip',
buttons: [
{
extend: 'excelHtml5'
}
]
});
});
Then all you need to do is to use this code below:
$('#example').DataTable({
"paging": false,
"info": false,
buttons: [
{
extend: 'excel'
},
{
extend: 'csv'
},
]
});
$('.button_export_excel').click(() => {
$('#example').DataTable().buttons(0,0).trigger()
})
The 0,0 points to excel and if you want to point to csv you do 0,1.

If you are trying to trigger the click event of another button and you are using jQuery (according to your tags), you can use
<button onclick="$('#ExportReporttoExcel').click()">Click me</button>
This selects the element with the id "ExportReporttoExcel" and triggers a click with using jQuery.

JQuery Datatable Responsiveness Issue with Fixed Column

When I use fixed column in JQuery Datatable it doesn't work properly if I resize the window.
If I remove scrollX from options, it appears just fine however fixedColumn feature doesn't work then.
See my options below:
$(document).ready(function() {
$('#example').DataTable( {
scrollY: 300,
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: true,
} );
} );
Link To Jsfiddle

Just Add width="100%" in your table tag.
It should be working by doing this.

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

jquery accordion Expand while page loading

jquery accordion should open while page loading.
after page loading complete accordion should compact automatically.
jQuery().ready(function(){
jQuery('#portslid').accordion({
collapsible: true,
autoheight: false,
alwaysOpen: false,
active: false,
animated: "bounceslide"
//animated: 'easeslide'
});
});

If you want the accordion to be open at page load you should change the active option to the element that you want to be open :
jQuery().ready(function(){
jQuery('#portslid').accordion({
collapsible: true,
autoheight: false,
alwaysOpen: false,
active: 1,
animated: "bounceslide"
//animated: 'easeslide'
});
});
And then at the load you close it :
jQuery(window).load(function(){
jQuery('#portslid').accordion({active: false});
});
EDIT : The jquery accordeon does not support to be all open , but there's work around like here : jQuery Accordion expand all div