Javascript parameter for DataTables gone after page intern reload

UWRP

I am creating a control panel which functions as an one page index. The user will not be sent to any other url during his session on the website. For this control panel I am using DataTables.

I successfully got the buttons working after some help here on the forums but I have now encountered another issue.
I have a javascript function, that uses jquery/ajax to load the page.

We have index.php, and from there we include page's like dashboard.php and characters.php into the website dynamically on what's selected by the user.

When I am on the characters.php page, the page where the datatable is located. It works fine untill I call the function LoadPage() again, at that point all the bools set to false and buttons do not work and are gone. Pagination, sorting etc is gone and the buttons too. Does anyone know what's causing this and how I can fix it?

My code:

$(document).ready( function () {
      var table = $('#characters').DataTable({
        "paging": true,
        "lengthChange": false,
        "ordering": true,
        "info": true,
        "autoWidth": false,
        "responsive": true,
        buttons: [
          {
            action: function ( e, dt, button, config ) {
                $('.modal-newcharx').modal({show: true});
            },
            text: 'Create New Character'
          }
        ],
        dom: 'Bftrip'
      });
      
      table.buttons().container()
        .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );
    } );

function LoadPage(page) {
    var delay = 500;
    $("#loaderIcon").show();
    $("#main-content").hide();
    jQuery.ajax({
      url: page,
      success:function(data){
        setTimeout(function() {
            $("#main-content").show();
            $("#main-content").html(data);
            $("#loaderIcon").hide();
        }, delay);
      },
      error:function (){}
    });
    $('ul.nav.nav-treeview a.nav-link.active').removeClass('active');
    document.getElementById(page).className = "nav-link"; 
    document.getElementById(page).classList.add("active"); 
  }

kthorngren

buttons do not work and are gone. Pagination, sorting etc is gone and the buttons too. Does anyone know what's causing this and how I can fix it?

Sounds like you have a Javascript error stopping the script on the page. Take a look at the browser's console for errors.

Kevin

UWRP

Hi Kevin, Thanks.

Sorry, I really should've done that first.
It was my own fault with a let in another function.