Datatable show/hide sorting/paging

I have a problem with datatables.net I want to show sorting/paging based on when the screnn width is over 700px and hide it when its under 700px. It works when i go from over 700px to under 700px but when i increase the width again the sorting/paging isnt showing again. I have read about datatables with destroy/retrieve attributes but i cant figure out whats wrong.

This is fixed now with updated code below!

My javascript code is looking like this:

   $(window).resize(function() {
    var isLarge = $(this).width() > 700;
    $('#transactionsTable').dataTable({
        destroy: true,
        searching: isLarge,
        paging: isLarge
    });
});

My problem right now:

For some reason when i change the screen width to check the responsive design the css doesn's seem to load correctly. So if i go from a big screen width to a smaller one the css for the top paging/searching doesn's load.

Any suggestions?

From the description of the retrieve option (emphasis mine):

Retrieve the DataTables object for the given selector. Note that if the table has already been initialised, this parameter will cause DataTables to simply return the object that has already been set up - it will not take account of any changes you might have made to the initialisation object passed to DataTables (setting this parameter to true is an acknowledgement that you understand this!).

You need to remove retrieve: true (and change to destroy: true) in your if case or just simplify it to

$(window).resize(function() {
    var isLarge = $(this).width() > 700;
    $('#transactionsTable').dataTable({
        destroy: true,
        searching: isLarge,
        paging: isLarge
    });
});