reloading new dataset after dropdown selection

jamies

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');
                    } );
 });

colin

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

jamies

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

tangerine

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

jamies

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.

colin

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