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.
Related
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
In my website I am trying to create two buttons in same column. I want set some space between these two buttons. I am very new in this programing language. I tried all the way I have seen from web. I could not succedd to do that. Here is the piece of my code where I am trying to create two buttons
<div class="form-group">
<div class="col-md-12" >
<button
class="btn btn-primary pull-right"
translate="TECHNICAL_DETAILS"
ng-click="$ctrl.techDetails(conflict)"
></button>
<button
class="btn btn-primary pull-right"
ng-if="$ctrl.isConflictEditable(conflict)"
translate="RESOLVE_CONFLICT"
ng-disabled="!conflict.active"
ng-click="$ctrl.editConflict(conflict)"
></button>
<button
class="btn btn-primary pull-right"
ng-if="!$ctrl.isConflictEditable(conflict)"
translate="RESOLVE_CONFLICT_NOW"
ng-disabled="!conflict.active"
ng-click="$ctrl.resolveConflict(conflict)"
></button>
</div>
</div>
You're using BOOTSTRAP classes and buttons are showing in a single row. You can insert the buttons in different sections and use the available classes to align two sections.
<div class="form-group">
<div class="col-md-2" id="firstBtnSection">
<button class="btn btn-primary pull-right" translate="TECHNICAL_DETAILS" ng-click="$ctrl.techDetails(conflict)"></button>
</div>
<div class="col-md-6 col-md-offset-2" id="secondBtnSection">
<button class="btn btn-primary pull-right" ng-if="$ctrl.isConflictEditable(conflict)" translate="RESOLVE_CONFLICT" ng-disabled="!conflict.active" ng-click="$ctrl.editConflict(conflict)"></button>
<button class="btn btn-primary pull-right" ng-if="!$ctrl.isConflictEditable(conflict)" translate="RESOLVE_CONFLICT_NOW" ng-disabled="!conflict.active" ng-click="$ctrl.resolveConflict(conflict)"></button>
</div>
</div>
Or you can add some margin for "secondBtnSection" div element.
As I see, you are using bootsrtap. So, you could add a class mr-3 to first and second button, and it would add some margin between buttons
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";
},
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
I am trying to use bootstraps popover button with html inside it, but I get Unexpected token errors when building the JSX.
Here is what I want to do in JSX:
<button type="button" className="btn btn-secondary" data-container="body"
data-toggle="popover" data-placement="bottom"
data-content="<button type="button" className="btn btn-danger pull-xs-left" data-dismiss="modal">Delete</button>">
data-html="true"
Popover on bottom
</button>
But react doesn't like building data-content:
data-content="<button type="button" className="btn btn-danger pull-xs-left"
Throws: Unexpected token
> 1265 | data-content={"<button type="button" className="btn btn-danger pull-xs-left" data-dismiss="modal">Delete</button>"}>
| ^
How do I get around this? I'd like to not use jquery preferably.
There is nested ' " ',you need to use this way
<button type="button" className="btn btn-secondary" data-container="body"
data-toggle="popover" data-placement="bottom"
data-content='<button type="button" className="btn btn-danger pull-xs-left" data-dismiss="modal">Delete</button>'
data-html="true"
Popover on bottom