Responsive DataTables in Backbone View

I'm experiencing some weird behaviors with responsive DataTables when using them in a Backbone view. The responsive behavior does not trigger and I believe it has to do with how views are rendered/shown.

I created a JS Bin to demonstrate the issue: Responsive DataTable Test

I have two views that both contain the same table element that has the appropriate classes added to initiate the responsive behavior as the container's width grows/shrinks.

In View 1, I have the DataTable initialized after a setTimeout of 0 milliseconds (believe this just queues it to fire after all current events...). This DataTable's responsive behavior works.

onRender: function() {
      this.$dataTable = this.$el.find('#example');
      (function(that){
          setTimeout(function(){
              that.$dataTable.DataTable();
          },0);
    })(this);
  },

In View 2, I initialize the DataTable as soon as the view is rendered. This DataTable's responsvie behavior does not work.

 onRender: function() {
      this.$dataTable = this.$el.find('#example');

      this.$dataTable.DataTable();
  },

Is there another way of going about this? I've tried bundling the init for DataTables in the onShow function as well since it is fired after onRender...but still doesn't work as intended.

Please let me know if you have any questions and thanks in advance!