Load bootstrap datatable on dropdown change -

i new jquery/bootstrap datatables , trying use 1 in application.

i have modal popup in have select dropdown. when select dropdown value changes make call server , display datatable grid in modal. when modal popup loads don't want display grid, not empty one. want display grid when dropdown value changes. grid has reload every time dropdown value changes.

i have been trying combinations of parameters it's not working. tried using 'ideferloading', 'bdeferrender', table.ajax.reload() etc it's not working expected. below code grid loaded when modal popup loads first time.

$(document).ready(function (){         var table = null;         $("#usertype").change(function() {             var usertype = $(this).val();             if (usertype == "test") {                 table = $('#example').datatable({                   'ajax': {                      'url': '/test/getallplatforms?itemid=' + $('#itemid').val(),                      "datasrc": ''                   },                   "columns": [                               { "data": "selected" },                               { "data": "id" },                               { "data": "platformname" },                               { "data": "itemprice" },                               { "data": "revenueshare" }                            ],                    columndefs: [ {                         orderable: false,                         classname: 'dt-body-center',                         targets:   0,                         'render': function (data, type, full, meta){                             console.log(data + " : " + full);                             var checked = "";                             if (data == true) {                                 checked = "checked";                             }                             return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '" ' + checked + '>';                         }                     }                    ],                     select: {                         style:    'os',                         selector: 'td:first-child'                     },                     order: [[ 1, 'asc' ]],                     'ideferloading': 1,                     'bdeferrender': true                });             }         });     });