Reinitialise table error

sabiha

Hi,

How can we reinitialise a table?

On a dropdown change I am creating a tab and getting data in to the datatable through an ajax call.

Once I close the tab and if I again try to open the same view by changing the dopdown I get the datatable cannot be reinitialised error.

I used bDestroy : true, but now the table wont appear at all also the error.

$('.target').on('change', function(){

table = $('#example').DataTable();
var chosen = $(".target option:selected").text();

if(chosen=="Test"){
$('.group_region_tab').toggle();
$( "#tabs" ).tabs( "option", "active", 3 );

$.ajax({
url: "/test2/test1/test/_api/web/lists/getbytitle('test')/items?$top=5000",
type: "GET",
dataType: 'json',
headers: { "Accept": "application/json; odata=verbose" },
success: mySuccessHandler,
error: myErrorHandler
});

function mySuccessHandler(data){

table = $('#example4').DataTable({
"aaData": data.d.results,
"aoColumns": [{
"className": 'details-control',
"data": null,
"defaultContent": ''
}, {
"mData": "A"
},{
"mData": "B"
},{
"mData": "C"
}, {
"mData": "D"
}, {
"mData": "E"
}, {
"mData": "F"
}, {
"mData": "G"
}, {
"mData": "H"}],
"bDestroy": true,
"displayLength": -1,
"columnDefs": [
{ "visible": false, "targets": 6 },
{ "visible": false, "targets": 7 },
{ "visible": false, "targets": 8 }
],
"order": [[ 6, 'asc' ],[ 7, 'asc' ],[ 8, 'asc' ]],
"drawCallback": function ( settings ) {
var api = this.api();
var rows = api.rows( {page:'all'} ).nodes();
var last=null;

        api.column(6, {page:'all'} ).data().each( function ( group, i ) {
            if ( last !== group ) {
                $(rows).eq( i ).before(
                    '<tr class="group1"><td colspan="7" bgcolor="red" style="padding-left:0px"><span>-</span>'+group+'</td></tr>'
                );

                last = group;
            }
} );

        api.column(7, {page:'all'} ).data().each( function ( group, i ) {
            if ( last !== group ) {
                $(rows).eq( i ).before(
                    '<tr class="group2"><td colspan="7" bgcolor="pink" style="padding-left:40px"><span>-</span>'+group+'</td></tr>'
                );

                last = group;
            }
        } );





   api.column(8, {page:'all'} ).data().each( function ( group, i ) {
            if ( last !== group ) {
                $(rows).eq( i ).before(
                    '<tr class="group3"><td colspan="7" bgcolor="#7FFFD4" style="padding-left:65px"><span>-</span>'+group+'</td></tr>'
                );

                last = group;
            }
        } ); 

      } //drawcallback closing

  }); //datatable closing

$('.group1').click(function ()
{
$(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
$(this).nextAll('tr').each( function()
{
if ($(this).is('.group1'))
{
return false;
}
$(this).toggle();
// $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
});
});

$('.group2').click(function ()
{
$(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
$(this).nextAll('tr').each( function()
{
if ($(this).is('.group1')||$(this).is('.group2'))
{
return false;
}
$(this).toggle();
// $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
});
});

$('.group3').click(function ()
{
$(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
$(this).nextAll('tr').each( function()
{
if ($(this).is('.group1')||$(this).is('.group2')||$(this).is('.group3'))
{
return false;
}
$(this).toggle();
// $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
});
});

} //success handler closing

function myErrorHandler(data, errCode, errMessage){ alert("Error: " + errMessage + " "+errCode); }

}

/* code for for closing test tab*/
$( "#tabs" ).tabs();
// $( "#tabs1" ).tabs();
$(".ui-closable-tab").on( "click", function() {

    var tabContainerDiv=$(this).closest(".ui-tabs").attr("id");
    var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
    $( "#" + panelId ).remove();
    $("#"+tabContainerDiv).tabs("refresh");
    var tabCount=$("#"+tabContainerDiv).find(".ui-closable-tab").length;
    if (tabCount<1) {
        $(tabContainerDiv).hide();
    }
    table = $('#example4').DataTable();
    //table.destroy();
$( "#tabs" ).tabs( "option", "active", 1 );
}); 

This code works fine for the first time beacuase the table is initialised for the first time. But when I close the tab and again select the view for the seocnd time it threw an error datatbles cannot be reinitialsed. using bDestoy : true, the error is no more there but the table doesn appear too.

Any help will be highly appreciated.

Many thanks in advance.

sabiha

Hi Allan,

Please could you help with above.

Kind Regards