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

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

jonesm33jonesm33 Posts: 3Questions: 1Answers: 0

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.

Answers

  • JoshuaHJoshuaH Posts: 6Questions: 1Answers: 2

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

  • jonesm33jonesm33 Posts: 3Questions: 1Answers: 0

    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();
                }
    
  • jonesm33jonesm33 Posts: 3Questions: 1Answers: 0

    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.

This discussion has been closed.