Attempting to create a button without success

Attempting to create a button without success

UWRPUWRP 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

  • tangerinetangerine Posts: 2,775Questions: 22Answers: 325

    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.

  • UWRPUWRP Posts: 8Questions: 2Answers: 0

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

  • kthorngrenkthorngren Posts: 10,722Questions: 25Answers: 2,449

    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

  • UWRPUWRP Posts: 8Questions: 2Answers: 0

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

  • kthorngrenkthorngren Posts: 10,722Questions: 25Answers: 2,449
    Answer ✓

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

    Kevin

  • UWRPUWRP Posts: 8Questions: 2Answers: 0
    edited September 14

    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.

  • kthorngrenkthorngren Posts: 10,722Questions: 25Answers: 2,449
    edited September 14

    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

  • UWRPUWRP Posts: 8Questions: 2Answers: 0
    edited September 14

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

  • kthorngrenkthorngren Posts: 10,722Questions: 25Answers: 2,449

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

    Kevin

  • kthorngrenkthorngren Posts: 10,722Questions: 25Answers: 2,449
    Answer ✓

    $('.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

  • UWRPUWRP Posts: 8Questions: 2Answers: 0
    edited September 14

    Thank you for clarifying that. It works now.

Sign In or Register to comment.