reloading new dataset after dropdown selection

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