Jquery Datatable gives error when recreating datatable: TypeError: t[c] is undefined
<p>I have a function that creates a datatable. On page load the datatable is created and drawn. Now, when I have a form submit to make a search on a table, I call the same function. First I make an instance of the datatable, I call the clear function then I call the function to recreate it. </p>

<p>Here is how I create  the datatable for the first time, which works just fine: </p>

<pre><code>    $(window).load(function () {


        var table = UpdateTableCompany(null, null);
        .....
</code></pre>

<p>Here is the function which manages the datatable:</p>

<pre><code>    function UpdateTableCompany(val, search_field)
{
    $('#tablePubDev').DataTable().clear();
    var table = $('#tablePubDev').DataTable({
        destroy: true,
        searching: false,
        "lengthMenu": [[5, 10, 15, -1], [5, 10, 15, "All"]],
        "pageLength": 5,
        "columnDefs": [
            {
                "render": function (data, type, row) {


                    var text = '&lt;div class="form-group"&gt;' +
                            '&lt;div class="checkbox-nice center" style="cursor: default; height:100px;"&gt;' +
                            '&lt;img  src="/application/assets/img/pub_devs/logos/' + row['c']['logo'] + '" style="max-height:100%; max-width: 100%;"/&gt;' +
                            '&lt;/div&gt;' +
                            '&lt;div class="checkbox-nice text-center" style="cursor: default"&gt;' +
                            '&lt;strong &gt;Id: ' + pad(data, 11) + '&lt;/strong&gt;' +
                            '&lt;/label&gt;' +
                            '&lt;/div&gt;' +
                            '&lt;/div&gt;';


                    return text;
                },
                "targets": 0,
            },
            {
                "render": function (data, type, row) {


                    var text = '&lt;div class="form-group"&gt;' +
                            '&lt;div class="checkbox-nice center" style="cursor: default; height:100px;"&gt;&lt;p class="center" style="font-size: 150%; font-weight: bold;"&gt;' +
                            row['c']['descr'] +
                            '&lt;/p&gt;&lt;/div&gt;' +
                            '&lt;/div&gt;';


                    return text;
                },
                "targets": 1,
            },
            {
                "render": function (data, type, row) {

                    var add_text1 = '';
                    var checked1 = '';
                    var add_text2 = '';
                    var checked2 = '';

                    if (data != null &amp;&amp; data &gt; 0) {

                        checked1 += 'checked="checked"';
                    } else
                        add_text1 += 'buttonDisabled ';

                    if (row['c']['developer'] != null &amp;&amp; row['c']['developer'] &gt; 0) {

                        checked2 += 'checked="checked"';
                    } else
                        add_text2 += 'buttonDisabled ';


                    var text = '&lt;div class="form-group"&gt;' +
                            '&lt;div class="checkbox-nice ' + add_text1 + '" style="cursor: default"&gt;' +
                            '&lt;input type="checkbox" ' + checked1 + ' disabled="disabled" id="checkbox-1"&gt;' +
                            '&lt;label for="checkbox-1"&gt;' +
                            'Publisher ' +
                            '&lt;/label&gt;' +
                            '&lt;/div&gt;' +
                            '&lt;div class="checkbox-nice ' + add_text2 + '" style="cursor: default"&gt;' +
                            '&lt;input type="checkbox" id="checkbox-2" ' + checked2 + ' disabled="disabled"&gt;' +
                            '&lt;label for="checkbox-2"&gt;' +
                            'Developer' +
                            '&lt;/label&gt;' +
                            '&lt;/div&gt;' +
                            '&lt;/div&gt;';


                    return text;
                },
                "targets": 3,
            },
            {
                "render": function (data, type, row) {
                    var text = '&lt;td style="width: 20%;"&gt;' +
                            //'&lt;a href="#" class="table-link"&gt;' +
                            //'&lt;span class="fa-stack"&gt;' +
                            //'&lt;i class="fa fa-square fa-stack-2x"&gt;&lt;/i&gt;' +
                            //'&lt;i class="fa fa-search-plus fa-stack-1x fa-inverse"&gt;&lt;/i&gt;' +
                            //'&lt;/span&gt;' +
                            //'&lt;/a&gt;' +
                            '&lt;a href="#" class="table-link updatePubDev" data-modal="modal-11"&gt;' +
                            '&lt;span class="fa-stack"&gt;' +
                            '&lt;i class="fa fa-square fa-stack-2x"&gt;&lt;/i&gt;' +
                            '&lt;i class="fa fa-pencil fa-stack-1x fa-inverse"&gt;&lt;/i&gt;' +
                            '&lt;/span&gt;' +
                            '&lt;/a&gt;' +
                            '&lt;span class="fa-stack table-link danger deletePubDev"&gt;' +
                            '&lt;i class="fa fa-square fa-stack-2x"&gt;&lt;/i&gt;' +
                            '&lt;i class="fa fa-trash-o fa-stack-1x fa-inverse"&gt;&lt;/i&gt;' +
                            '&lt;/span&gt;' +
                            '&lt;/td&gt;';


                    return text;
                },
                "targets": 4,
            }
        ],
        "columns": [
            {"data": "c.idpubdev", "name": "c.idpubdev"},
            {"data": "c.descr", "name": "c.descr"},
            {"data": "c.date_founded", "name": "c.date_founded"},
            {"data": "c.publisher", "name": "c.publisher"},
            {"data": "c.date_founded", "name": "c.date_founded"},
            {"data": "c.developer", "name": "c.developer", "visible": false, "searchable": false},
            {"data": "c.logo", "name": "c.logo", "visible": false, "searchable": false},

        ],
        "order": [[0, false], [1, 'asc'], [2, 'asc'], [3, 'asc']],

        "displayLength": 3,
        serverSide: true,
        "ajax":
                {
                    "url": "/pubdev/search/",
                    "type": "POST",
                    "data": function (d) {
                        if (val)
                            d.val = val;
                        if (search_field)
                            d.search_field = search_field;
                    }

                },
        error: function (request, status, error) {
            alert('Unable to update table contents');
            console.log(request);
            console.log(status);
            console.log(error);
        },

    });

    return table;
}
</code></pre>

<p>Here instead is the submit of the form which executes the search function:</p>

<pre><code> $("#search_form").submit(function (e) {
            e.preventDefault();

            var search_key = $.trim($('#val').val());
            var search_field = 'c.descr like ';

            table = $('#tablePubDev').DataTable();

            table.clear();

            table = UpdateTableCompany(search_field, search_key);

        });
</code></pre>

<p>I am currently using the minified format of jquery version v1.10.2 
The version of datatable is 1.10.4</p>

<p>This is the error I get in the console
<a href="https://i.stack.imgur.com/DFD9o.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DFD9o.png" alt="enter image description here"></a></p>

<p>I tried an experiment: I did not load the datatable in document ready, so I made a search submit to load the datatable , and it worked! Of course if I do a second search then the same error occurs, so the problem has to do with the recreation of datatable. All the back end code (php) works correctly and gives the desired results.</p>

<p>Here is the table in html</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="main-box no-header clearfix"&gt;
                    &lt;div class="main-box-body clearfix"&gt;
                        &lt;div class="table-responsive"&gt;
                            &lt;table id="tablePubDev" class="table user-list table-hover"&gt;
                                &lt;thead&gt;
                                    &lt;tr&gt;
                                        &lt;th&gt;Company&lt;/th&gt;
                                        &lt;th&gt;Name&lt;/th&gt;
                                        &lt;th&gt;&lt;span&gt;Listed Games&lt;/th&gt;
                                        &lt;th&gt;Type&lt;/th&gt;
                                        &lt;th&gt;Actions&lt;/th&gt;
                                    &lt;/tr&gt;
                                &lt;/thead&gt;
                                &lt;tbody&gt;

                                &lt;/tbody&gt;
                            &lt;/table&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>I have tried using the unminified version of datatable (v 1.10.12) and I got still and error but now it says his:</p>

<blockquote>
  <p>TypeError: headerCells[i] is undefined</p>

<pre><code>headerCells[i].style.width = column.sWidthOrig !== null &amp;&amp; column.sWidthOrig !==...
</code></pre>
</blockquote>

<pre><code>    // Clone the table header and footer - we can't use the header / footer
        // from the cloned table, since if scrolling is active, the table's
        // real header and footer are contained in different table tags
        tmpTable.find('thead, tfoot').remove();
        tmpTable
            .append( $(oSettings.nTHead).clone() )
            .append( $(oSettings.nTFoot).clone() );

        // Remove any assigned widths from the footer (from scrolling)
        tmpTable.find('tfoot th, tfoot td').css('width', '');

        // Apply custom sizing to the cloned header
        **headerCells = _fnGetUniqueThs( oSettings, tmpTable.find('thead')[0]** ); &lt;-- This is where the error occurs &lt;--

        for ( i=0 ; i&lt;visibleColumns.length ; i++ ) {
            column = columns[ visibleColumns[i] ];

            headerCells[i].style.width = column.sWidthOrig !== null &amp;&amp; column.sWidthOrig !== '' ?
                _fnStringToCss( column.sWidthOrig ) :
                '';

            // For scrollX we need to force the column width otherwise the
            // browser will collapse it. If this width is smaller than the
            // width the column requires, then it will have no effect
            if ( column.sWidthOrig &amp;&amp; scrollX ) {
                $( headerCells[i] ).append( $('&lt;div/&gt;').css( {
                    width: column.sWidthOrig,
                    margin: 0,
                    padding: 0,
                    border: 0,
                    height: 1
                } ) );
            }
        }

        // Find the widest cell for each column and put it 
</code></pre>

<p>UPDATE:</p>

<p>I think I know why this is happening, although I still need to find a fix for this. It just so happens that When I define my columns in the Datatable instantiation:</p>

<pre><code>   "columns": [
            {"data": "c.idpubdev", "name": "c.idpubdev"},
            {"data": "c.descr", "name": "c.descr"},
            {"data": "c.date_founded", "name": "c.date_founded"},
            {"data": "c.publisher", "name": "c.publisher"},
            {"data": "c.date_founded", "name": "c.date_founded"},
            {"data": "c.developer", "name": "c.developer", "visible": false, "searchable": false},
            {"data": "c.logo", "name": "c.logo", "visible": false, "searchable": false},
</code></pre>

<p>These need to be exactly as many as the table headers that I included in my html page</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>                            &lt;thead&gt;
                                    &lt;tr&gt;
                                        &lt;th&gt;Company&lt;/th&gt;
                                        &lt;th&gt;Name&lt;/th&gt;
                                        &lt;th&gt;&lt;span&gt;Listed Games&lt;/th&gt;
                                        &lt;th&gt;Type&lt;/th&gt;
                                        &lt;th&gt;Actions&lt;/th&gt;
                                    &lt;/tr&gt;
                                &lt;/thead&gt;</code></pre>
</div>
</div>
</p>

<p>In this case I have 5 table headers and 7  data column definitions (two have visible = false). When I used them in an older project, all I had to do was set the "visible" property to false so that they wouldn't be mapped to a table header, but here it doesn't seem to work... Why do you think that would happen? I sthere a way to work around it?</p>