Each time I display my table I get a sort arrow. See image of 7 arrows in one .

hanoncs

Each time I display my table I get an additional sort arrow added to the th.

Here is my debug code if needed: erilew

Here is an image of the issue: http://i.imgur.com/AYefW5d.jpg

I also am having an issue with my columns not aligning correctly. it only happens sometimes, other times it works fine. If I click/sort the table, the columns snap align correctly. Here is the image link of that issue: http://i.imgur.com/1tjASS7.jpg

I have to reinitialize the table each time with different data, so I have this:

   $('#car').empty();
    table2.clear().draw();

If you know of a better way to completely destroy the and recreate it please let me know. i think this may be causing the column alignment issue.

If you would like a link to my demo, please comment and I will pm the link.

Here is the code.

```

    function format(notes) {
        var object = notes.data;
        var out = '<table id="display" style="font-size: 12px; min-width: 90%; margin-left: 90px; margin-bottom:10px; border-bottom:1px solid lightgray;">';
        out += '<thead><tr><th class="ui-state-default">Answer</th><th  class="ui-state-default"># of Answers</th>';
        out += '<th class="ui-state-default">Percent</th></tr></thead><tbody>';
        for (var i in object) {

            out += '<tr><td>' + object[i].Answer + '</td><td>' + object[i].NumberOfAnswers + '</td><td>' + object[i].Percent + '</td></tr>'
        }

        out += '</tbody></table>';
        return out;
    }

    $('#PacingModal').on('shown.bs.modal', function (e) {
        var cat = $("#PacingModal").attr('category');
        var status = $("#PacingModal").attr('status');
        var taskid = $("#PacingModal").attr('taskid');

        //Fill the category Details table
        $.ajax({

            type: "POST",
            cache: false,
            dataType: 'text',
            url: '/rmsicorp/ClientSite/Reset/CategoryStatus/Detail/CatStatusDetailData.php',
            data: { category: cat, statustype: status, taskid: taskid },
            beforeSend: function () {
                $('#Loading').show();
                $('#SelectContainer2').empty();
            },
            success: function (data) {
                $("#cat2").html(data);
                $('#Loading').hide();
            },
            complete: function (data) {

                var table = $("#cat2").find("#tabl").DataTable({
                    "scrollY": "400px",
                    "scrollCollapse": true,
                    "paging": false,
                    "bAutoWidth": false,
                    "jQueryUI": true,
                    "order": [[5, "asc"]],
                    "TableTools": {
                        "sSwfPath": "/swf/copy_csv_xls_pdf.swf",
                        "aButtons": [
                            {
                                "sExtends": "xls",
                                "sButtonText": "Excel HEY!",
                                "sFileName": "*.xls"
                            },
                        ]
                    }
                });

            },
            error: function () {
                //TODO - Add auto email for error
                alert("Error retriving the data from the server! Please check back soon.");
                //Close modal if error
                $("#PacingModal").modal('hide');
            }
        });





        var TaskID = $('#PacingModal').attr('taskid');
        //var QuestionID = table2.cell('.shown', 0).data();
        var table2 = $('#car').DataTable({
            destroy: true,
            "ajax": {
                "url": "/rmsicorp/clientsite/pacingModal/surveyajax.php?TaskID=" + TaskID,
                "type": "get"
            },
            "scrollY": "400px",
            "paging": false,
            "bAutoWidth": true,
            "columns": [
                {
                    "className": 'details-control',
                    "orderable": false,
                    "data": null,
                    "defaultContent": ''
                },
                {
                    "data": "ID",
                    "type": "hidden"
                },
                 { "data": "Question" },
            ],

        });


        var detailsrows = [];
        $('#car tbody').on('click', 'td.details-control', function () {
            var TaskID = $('#PacingModal').attr('taskid');
            var tr = $(this).closest('tr');
            var row = table2.row(tr);
            var cell = row.data();
            var RowID = cell.ID;
            var RID = $.inArray(tr.attr('id'), detailsrows);
            $.ajax({
                type: 'post',
                url: '/rmsicorp/clientsite/pacingModal/surveyajax2.php',
                data: { TaskID: TaskID, QuestionID: RowID },
                dataType: 'json',
                success: function (result) {
                    if (row.child.isShown()) {
                        row.child.hide();
                        tr.removeClass('shown');
                        detailsrows.splice(RID, 1);
                    }
                    else {
                        // console.log(result);
                        row.child(format(result)).show();
                        tr.addClass('shown');

                        if (RID === -1) {
                            detailsrows.push(tr.attr('id'));
                        }

                    }
                }
            });
        });

        $("#PacingModal").on('hide.bs.modal', function () {
            //empty html content out of div so the user does not see the last search before the new one loads when they click on a different option
            $('#cat2').empty();
            $('#SliderContainer2').empty();
            $('#car').empty();
            table2.clear().draw();



        });

    });

```

hanoncs

I am using columns.adjust() to fix the column alignment. But I am still getting the replicating sort arrows.