Attempting to create a button without success
Attempting to create a button without success
UWRP
Posts: 8Questions: 2Answers: 0
Link to test case: https://uw-rp.com/ucp/
Username: demouser
Password: Demo-1234
After login, click on characters in the left side menu. This is where the datatable is located.
Debugger code (debug.datatables.net): N/A
Error messages shown: N/A
Description of problem: I've found out about datatables yesterday and damn i'm blown away on how easy it is to use compared to my old php pagination system. Howeever, I want to add a custom button but it does not seem to work.
This is the reference I have followed: https://datatables.net/reference/api/button().add()
Sadly, it does not show up the button at all.
Could anyone tell me what's wrong with my code?
My code:
<script>
$(function () {
var table = $('#characters').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"responsive": true,
"searching": true,
});
table.button().add( 0, {
action: function ( e, dt, button, config ) {
dt.ajax.reload();
},
text: 'Reload table'
} );
});
</script>
This question has accepted answers - jump to:
Answers
You appear to have missed this from the example page:
Thank you for your quick reply.
I have installed the button extension but the button still does not show up.
Doesn't look like you have used either of the options to display the buttons as described in the Buttons Install docs. Here are examples of each:
https://datatables.net/extensions/buttons/examples/initialisation/simple.html
https://datatables.net/extensions/buttons/examples/styling/bootstrap4.html
Kevin
Sorry if these questions appear dumb but I'm fairly new to javascript so I'm not fully understanding everything. It's quite different than PHP for example.
I have followed the installation docs which you sent. Carefully reading every step this time. But I really don't get it. It's still not working.
What I did:
- Initialisation as part of the constructor (In Datatables)
- I then tried direct insertion for displaying the button.
I did also read this page: https://datatables.net/reference/api/buttons().container()
I think my issues lies with appendTo( ); function. But to what should it append? A div id, or a class? A table? I do not quite understand that part.
This is the code I currently have:
var table = $('#characters').DataTable( {"paging": true,"lengthChange": false,"searching": false,"ordering": true,"info": true,"autoWidth": false,"responsive": true,"searching": true,buttons: [ 'New' ]} );table.buttons().container().appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );Can you add it as part of the Datatables init code, like this?
http://live.datatables.net/wezorisa/1/edit
Kevin
Thank you, Kevin! It works.
I am trying to show up a modal when clicking on the button, is that possible?
I tried so by doing this:
action: function ( e, dt, button, config ) {jQuery(document).ready(function() {jQuery('#modal-newchar').find('div').attr('data-toggle', 'modal');jQuery('#modal-newchar').find('div').attr('data-target', '#modal-newchar');});},text: 'Create New Character'But nothing happens when I click on the button.
It just so happens that Colin answered a similar question today in this thread. If you still need help then update the example I posted with your code so we can help debug.
Kevin
I have applied the changes and it adds a dark transparent overlay but it does not open the modal.
This is my code:
action: function ( e, dt, button, config ) {$('.modal-newchar').on('shown.bs.modal', function () {table.fixedColumns().relayout();}).modal({show: true});},html:
<div class="modal fade" id="modal-newchar"><div class="modal-dialog modal-newchar"><div class="modal-content"><div class="modal-header">Kevin
This isn't going to work. From the example in the other thread all you need os the code to show the modal:
$('.myModal').modal({show: true});.The other part of the code creates an event to perform recalculation of fixedColumns. That is a bug in that example that will append the event handler each time the button is clicked - not a good thing.
Kevin
Thank you for clarifying that. It works now.