Attempting to create a button without success

UWRP

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>

tangerine

You appear to have missed this from the example page:

Create a new button and add it to the document.
Please note - this property requires the Buttons extension for DataTables.

UWRP

Thank you for your quick reply.
I have installed the button extension but the button still does not show up.

kthorngren

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

UWRP

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() ) );

kthorngren

Can you add it as part of the Datatables init code, like this?
http://live.datatables.net/wezorisa/1/edit

Kevin

UWRP

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.

kthorngren

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

UWRP

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">

kthorngren

If you still need help then update the example I posted with your code so we can help debug.

Kevin

kthorngren

$('.modal-newchar').on('shown.bs.modal', function () {
table.fixedColumns().relayout();
})
.modal({show: true});

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

UWRP

Thank you for clarifying that. It works now.