reloading new dataset after dropdown selection

reloading new dataset after dropdown selection

jamiesjamies Posts: 4Questions: 1Answers: 0

Hi there i am trying to reload the datatable after a user selected an item from a dropdown select. i keep getting that it cannot reinitialise the table error.

the url does work and shows the correct jsondata, it is more or less the same as the original table load.

here is the code in select change

 $(document).ready(function(){
    $("select.supportworkers").change(function(){
        $('#tblusers').dataTable().fnClearTable();
  
        var swid = $(this).children("option:selected").val();
        var t = getCookie('token');
        var i = getCookie('userid');
        var sec =getCookie('sec');
      var url = "<?php echo BASEURL ?>/users/getUsers.php?authtoken="+ t +"&uid="+i + "&sec=" + sec +"&swid=" +swid;
       var table = $('#tblusers').DataTable({
            "ajax": {
                url  : url   
        },
    });
   table.ajax.reload();
});
});

Belwo is the code i used to create and load the table on page load.


$(document).ready(function(){ var t = getCookie('token'); var i = getCookie('userid'); var sec =getCookie('sec'); var url = "<?php echo BASEURL ?>/users/getAllUsers.php?authtoken="+ t +"&uid="+i + "&sec=" + sec; $('#tblusers').DataTable({ "processing": true, "serverSide": true, "ajax": { url : url }, "columns" : [ { "data": "id", "title": "User ID" }, { "data": "username", "title": "Username" }, { "data": "firstname", "title": "Firstname" }, { "data": "lastname", "title": "Lastname" }, { "data": "dateofbirth", "title": "Date of Birth" }, {"data": "Edit", "title": "Edit", render: function (data, type, full, meta) { return '<button name="select" class="btn"><a href="edituser.php?id=' + full.id + '">Edit User</a></button>'; } } ], select: true, select: 'single', order: [[ 1, "asc" ]], dom: 'Bfrtip', language: { emptyTable: "You haven't got any users assigned to you, or you dont have permissions.", loadingRecords: "Getting records..." }, responsive: { details: { type: false, renderer: $.fn.dataTable.Responsive.renderer.tableAll( { tableClass: 'table table-striped table-bordered' } ) } } } ) .on( 'select', function ( e, dt, type, indexes ) { console.log('Table row selected'); } ); });

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Yep, this will re-initialise the table:

           var table = $('#tblusers').DataTable({
                "ajax": {
                    url  : url  
            },
        });
    

    Just call ajax.reload() instead, something like $('#tblusers').DataTable().ajax.reload(),

    Colin

  • jamiesjamies Posts: 4Questions: 1Answers: 0

    Hi Colin,
    i get the follwoing error

    DataTables warning: table id=tblusers - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    Colin highlighted the code which is causing the error, and showed what to replace it with. Did you follow that?

  • jamiesjamies Posts: 4Questions: 1Answers: 0

    i am trying to reload the table with new/filtered data from the drop down so it needs to get the new data from the url.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    If you just want to change the URL for the end-point, set it first with ajax.url(), then call ajax.reload(), so replace that code I mentioned above with:

    $('#tblusers').DataTable().ajax.url("<?php echo BASEURL ?>/users/getUsers.php?authtoken="+ t +"&uid="+i + "&sec=" + sec +"&swid=" +swid);
    $('#tblusers').DataTable().ajax.reload();
    

    Colin

This discussion has been closed.