create/destroy/create error

cdamundsen

Hi -

I'm having an issue where I'm trying to destroy an existing instance of a table and recreate it with new columns and new row data.

Here's a snippet of what I'm trying to do:

var tableVar;
$(document).ready(function()
{
    $('#submit').click(function()
    {
         if ($.fn.dataTable.isDataTable('#the_table') && (tableVar != null))
        {
            tableVar.destroy();
        }
        /* gather inputs from the user that determine which columns and rows 
            they are interested in seeing */
        $.getJSON($SCRIPT_ROOT + "/_get-filter-computers",
                { showColOne : $('input[name="showColOne"]').prop('checked'),
                  showColTwo : $('input[name="showColTwo"]').prop('checked'),
                  ...
                  filterOne  : filterOneList.toString(),
                  filterTwo  : filterTwoList..toString(),
                  ... },
                 function(data)
                {
                    tableVar = $('#the_table').DataTable( 
                    { "data" : data.data,
                      "columns" : data.headers,
                      "initComplete" : function(settings, json)
                      {
                          if ( ! tableVar.data().count())
                          {
                              $('#table_div').hide();
                              $('#no_results_div').show();
                          } else 
                          {
                               $('#no_results_div').hide();
                               $('#table_div').show();
                          }
                      }
                  } ); } );
                  return false;
                  } ); } );

This works the first time through, but the second time through it fails with a tableVar not defined error.

But I've used this code without error that does a similar thing:

var tableVar;
$(document).ready(function()
{
    $('#submit').click(function()
        {       
            if ($.fn.dataTable.isDataTable('#the_table'))
            {       
                tableVar.destroy();
            }       
            tableVar = $('#the_table').DataTable(
                { 
                    "ajax" : $SCRIPT_ROOT + "/_get-search-results?search=" + $('input[name="search_string"]').val(),
                    "initComplete" : function(settings, json)
                    {
                        if ( ! tableVar.data().count())
                        {
                            $('#results_div').hide();
                            $('#no_results_div').show();
                        } else
                        {
                            $('#results_div').show();
                            $('#no_results_div').hide();
                        }
                    }
                } ); } ); } );

In both cases I declare tableVar outside the document ready call, but in the first it doesn't get set by the DataTable call.

I'm relatively new to using DataTables and javascript, so I might be missing something, but can someone tell me why tableVar isn't getting set in the first code block but is in the second?

Failing that, is it possible to use the $('#the_table').DataTable({ "ajax" : ... call and still set the column headers on the fly like I'm doing in the block with the DataTable({ "columns" : data.headers, "data" : data.data call?

Thanks,
- Craig

cdamundsen

I still don't know why tableVar isn't getting set, but I solved the problem by doing this instead

if ($.fn.dataTable.isDataTable('#the_table')
{
    var tables = $('.dataTable').DataTable();
    var table = tables.table('#the_table');
    table.destroy();
}