Jquery Datatable in Modal Dialogue is opening just once

Question

i am using asp.net mvc with bootstrap 3 and i am opening a modal dialogue in which i m loading jquery data-tatble .At first time everything is working fine but when i am closing the modal and again opening the modal its throwing the error :

Uncaught TypeError: Cannot read property 'aoData' of null

Code i am using :

var responsiveHelper;
var breakpointDefinition = {
    tablet: 1024,
    phone: 480
};

var tableContainer = $('#datatable');

$(document).ready(function (){
   tableContainer.dataTable({
        // Setup for Bootstrap support.
        sDom: '<"row"<"span6"l><"span6"f>r>t<"row"<"span6"i><"span6"p>>',
        sPaginationType: 'bootstrap',
        oLanguage: {
            sLengthMenu: '_MENU_ records per page'
        },
        bFilter: false,
        // Setup for responsive datatables helper.
        bAutoWidth: false,
        fnPreDrawCallback: function () {
            // Initialize the responsive datatables helper once.
            if (!responsiveHelper) {
                responsiveHelper = new ResponsiveDatatablesHelper(tableContainer, breakpointDefinition);
            }
        },
        fnRowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            responsiveHelper.createExpandIcon(nRow);
        },
        fnDrawCallback: function (oSettings) {
            responsiveHelper.respond();
        }
    });
});

Answer 1

Finally i have resolved my problem , was doing a silly mistake . following code should be in document.ready function :

var responsiveHelper;
var breakpointDefinition = {
    tablet: 1024,
    phone: 480
};
var tableContainer = $('#datatable');

and everything will work perfectly :) :)