Why is there an "Undefined" string at the top of my table?

jonesm33

The table is built correctly and all functionality is there, but I have an annoying string at the top of the table that says undefined. I am wondering where this is coming from or how I remove it.

JoshuaH

Are you defining the dom and maybe have a bad definition? You should post some code ;)

jonesm33

Okay, I'm building a DataTable with Dynamic column headers. I have tried removing characters in the dom element in order to fix the problem but have had no luck.

<div id="tableDiv"></div>

$(document).ready(function ($) {
            function processForm(e) {
                $.ajax({
                    url: '@Url.Action("ExecuteQuery", "Home")',
                    dataType: 'json',
                    type: 'post',
                    contentType: 'application/json',
                    data: JSON.stringify({ "query": $('#Query').val() }),
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(errorThrown);                      
                    },
                    success: function (json) {
                        if (!json.success) {
                            alert(json.error);
                            $('#query_validate').Val(json.error);
                        } else {
                            var obj = JSON.parse(json.jsonstring);
                            var tableHeaders;
                            $.each(obj.columns, function (i, val) {
                                tableHeaders += "<th>" + val + "</th>";
                            });
                            $("#tableDiv").empty();
                            $("#tableDiv").append('<table id="displayTable" data-page-length="100" class="display" width="100%"><thead><tr>' + tableHeaders + '</tr></thead></table>');
                            $('#displayTable').dataTable(
                            {
                                dom: 'Bfrtip',
                                buttons: [
                                    //'copyHtml5',
                                    'csvHtml5'
                                ],
                                scrollY: 700,
                                scrollX: 400,
                                "aaSorting": [],
                                data: obj.data
                            });
                        }
                    }
                    
                });
                e.preventDefault();
            }

jonesm33

So I solved the problem. If you look at the code above I put

var tableHeaders;

This added the undefined string to my table. I changed this to

var tableHeaders = "";

and it worked perfectly.