We Keep Coding

How to hook up custom buttons instead of the DataTables buttons?

I have some custom buttons on a page, that I would like to replicate the functionally of the DataTables buttons. I am using DataTables because I can quickly export to Excel and PDF. I do not need the searching, filtering or other features of DataTables for this project. So if you have suggestions on a better way, I'm willing to listen.
I have looked at the DataTables custom button, (Thats how I got the PRINT button) but I can't seem to find a way of using my buttons instead.
Does anyone know a way how to use custom buttons?
<div class="col-6">
<div class="col d-print-none">
<button type="button" class="btn btn-sm btn-primary float-right m-1" onclick="window.print();"><i class="fas fa-print"></i> Print Report</button>
<button type="button" class="btn btn-sm btn-success float-right m-1" onclick=""><i class="fas fa-file-excel"></i> Export to Excel</button>
<button type="button" class="btn btn-sm btn-danger float-right m-1" onclick=""><i class="fas fa-file-pdf"></i> Download as PDF</button>
<button type="button" class="btn btn-sm btn-secondary float-right m-1" onclick=""><i class="fas fa-clipboard"></i> Copy to Clipboard</button>
</div>
</div>
The DataTables code.
$(document).ready(function() {
$('#dataTableDetails').DataTable({
"deferRender": true,
"ordering": false,
"paging": false,
"info": false,
"searching": false,
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5',
{
text: 'PRINT',
action: function ( e, dt, node, config ) {
window.print();
}
}
]
});
} );

Try this, No onclick events needed other than for Print. Basically call the classes of the default buttons
<div class="col-6">
<div class="col d-print-none">
<button type="button" class="btn btn-sm btn-primary float-right m-1" onclick="window.print();"><i class="fas fa-print"></i> Print Report</button>
<button type="button" class="btn btn-sm btn-success buttons-excel float-right m-1"><i class="fas fa-file-excel"></i> Export to Excel</button>
<button type="button" class="btn btn-sm btn-danger buttons-pdf float-right m-1"><i class="fas fa-file-pdf"></i> Download as PDF</button>
<button type="button" class="btn btn-sm btn-secondary buttons-copy float-right m-1"><i class="fas fa-clipboard"></i> Copy to Clipboard</button>
</div>
</div>
You can check these threads for more information;
How to call Datatable csv button from custom button
DataTables - How can I use my own buttons for exporting?

The DataTables plugin has an extension that allows you to add custom buttons, you can find the documentation for this here: https://datatables.net/extensions/buttons/custom. You can use this in coordination with the dom field to move or set the default and custom buttons as you need. Documentation for this is here: https://datatables.net/reference/option/dom

First, in order to remove those button, you need exclude from buttons
Second, in order to create custom button events, you need get your datatable instance then manual fire your event.

Button can't click() on javascript if it has multiple button in one div/list

I have problem that Button can't click() on javascript if it has multiple button in one div/list. In this case, "ADD" button doing nothing if i click it. But "Delete" button can. If i remove Delete function on js, add button work properly. What's wrong?
I have HTML like this
<ul class="coll-list">
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
</ul>
And JS function :
var id ="";
$('.coll-list').off('click').on('click','.btn-remove-coll', function(e) {
id = $(this).data('id');
// doing ajax thing
});
$('.coll-list').off('click').on('click','.btn-add-coll', function(e) {
id = $(this).data('id');
// doing ajax thing
});

This problem happens because the second $('.coll-list').off('click') remove ALL on('click') event you have set before (i.e. on click on .btn-remove-coll, in this case).
You can try to change your off('click').on('click') order in your page and you'll see that will change the working button (or Delete or Add).
Here only remove button works
$('.coll-list').off('click').on('click','.btn-add-coll', function(e) {
alert("add")
});
$('.coll-list').off('click').on('click','.btn-remove-coll', function(e) {
alert("remove")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="coll-list">
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
</ul>
And here add button only
$('.coll-list').off('click').on('click','.btn-remove-coll', function(e) {
alert("remove")
});
$('.coll-list').off('click').on('click','.btn-add-coll', function(e) {
alert("add")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="coll-list">
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
</ul>
2 possible solution to make both buttons work are:
Simply remove off('click')
Combine your 2 clicks in 1 on('click')
$('.coll-list').off('click').on('click','.btn-add-coll, .btn-remove-coll', function(e) {
if($(this).hasClass("btn-add-coll")){
alert("add")
} else {
alert("remove")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="coll-list">
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
</ul>

Try changing .coll-list from you JavaScript code with .coll_list because that is the class of you ul HTML tag.
Edit
It seems that it is impossible for some reason to have click functions for two different divs in the same <li> tag. I'd sugges you to change the HTML markup a bit, and use the <div> tag instead of <ul>. Fiddle: jsfiddle.net/xpvt214o/592987

How can I change jconfirm-buttons style craftpip/jquery-confirm

jquery-confirm version: v3.3.0 git:craftpip/jquery-confirm
jsfiddle for tests https://jsfiddle.net/bdtx2ub2/
<div class="jconfirm-buttons">
<button type="button" class="btn btn-info btn-block">Update</button>
<button type="button" class="btn btn-danger btn-block">Delete</button>
<button type="button" class="btn btn-default btn-block">Cancel</button>
</div>
Can you help me... how can I add to div with class jconfirm-buttons my class? Is there are any solution like columnClass or btnClass for this div?
I want to justify my buttons in this div by adding bootstrap class btn-block to make div justified
<div class="jconfirm-buttons btn-block">
<button type="button" class="btn btn-info btn-block">Update</button>
<button type="button" class="btn btn-danger btn-block">Delete</button>
<button type="button" class="btn btn-default btn-block">Cancel</button>
</div>
Before
What I want to do
How can I do this? Is there are any solution without javascript? Or how can I do it with js (thinking that I can justify them binding this javascript on event "onOpen")?

Here jsfiddle link. This solution not good but still work.
onOpenBefore:function(){
this.buttons.close.el[0].parentNode.className+=" btn-block";
},

Changing button classes in Angular UI Datepicker

In this plunk I have an Angular UI Datepicker that uses a template. I need to change the colors of the "Today", "Clear" and "Close" buttons but changing them in popup.html doesn't work. It should show gray, orange and blue buttons.
I changed from
<li ng-if="showButtonBar" class="uib-button-bar">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-info uib-datepicker-current" ng-click="select('today', $event)" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
<button type="button" class="btn btn-sm btn-danger uib-clear" ng-click="select(null, $event)">{{ getText('clear') }}</button>
</span>
<button type="button" class="btn btn-sm btn-success pull-right uib-close" ng-click="close($event)">{{ getText('close') }}</button>
</li>
to
<li ng-if="showButtonBar" class="uib-button-bar">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-default uib-datepicker-current" ng-click="select('today', $event)" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
<button type="button" class="btn btn-sm btn-warning uib-clear" ng-click="select(null, $event)">{{ getText('clear') }}</button>
</span>
<button type="button" class="btn btn-sm btn-primary pull-right uib-close" ng-click="close($event)">{{ getText('close') }}</button>
</li>
Note that I changed the button class names to change the color, but when I inspect in the browser, the datepicker is still using the old classes. How to fix this?

To set a custom popup template use datepicker-popup-template-url attribute, for example:
<input datepicker-popup-template-url="popup.html" type="text" class="form-control" is-open="true" ng-model="dt" uib-datepicker-popup="MM-dd-yyyy"
datepicker-options="dateOptions" close-text="Close" popup-placement="bottom-left" on-open-focus="false" />
Demo

Bootstrap 3 - Tooltips - Buttons - padding dissapears

I'm testing Bootstrap and I have a silly problem.
When I use tooltips on several buttons (in the same row) at the begining all the buttons are separated by several pixels.
When the tooltip appears then the space between the buttons dissapears.
My code:
<button type="button" class="btn btn-default" data-toggle="tooltip" id="btn01"
data-placement="top" title="Tooltip on top">Button with tooltip</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" id="btn02"
data-placement="left" title="Tooltip on left">Button with tooltip</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" id="btn03"
data-placement="right" title="Tooltip on right">Button with tooltip</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" id="btn04"
data-placement="bottom" title="Tooltip on bottom">Button with tooltip</button>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
$('document').ready(function() {
$('#btn01').tooltip();
$('#btn02').tooltip();
$('#btn03').tooltip();
$('#btn04').tooltip();
});
</script>

Problem already solved adding inside the button tags ...
data-container="body"
By the way ... I still know nothing about JS. I'm learning.
So I understand I could add for example the class clsTooltip to the 4 buttons and then ... ¿use this ...?
$('document').ready(function() {
$('.clsTooltip').tooltip();
});
Thanks a lot!!