Jquery Datatables列未对齐和重复排序箭头问题

每次显示表格时，都会在

中添加一个额外的排序箭头

以下是该问题的图像：

我也有一个问题，我的列没有正确对齐。这只是偶尔发生，其他时候效果很好。如果单击/排序表格，列将正确对齐。以下是该期的图片链接：

我每次都必须使用不同的数据重新初始化该表，因此我有：

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

如果你知道一个更好的方法来完全摧毁和重建它，请让我知道。我认为这可能是导致柱对齐问题的原因

下面是Javascript代码

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();

    });

});

函数格式（注释）{
var对象=notes.data；
var out=''；
out+=‘答案#个答案’；
out+=‘百分比’；
for（对象中的变量i）{
out+=''+对象[i]。答案+''+对象[i]。NumberOfAnswers+''+对象[i]。百分比+''
}
out+=''；
返回；
}
$（'#PacingModal'）.on（'show.bs.modal'，函数（e）{
var cat=$（“#PacingModal”）.attr（'类别'）；
var状态=$（“#PacingModal”）.attr（'status'）；
var taskid=$（“#PacingModal”）.attr（'taskid'）；
//填写类别详细信息表
$.ajax({
类型：“POST”，
cache:false，
数据类型：“文本”，
url:“/rmsicorp/ClientSite/Reset/CategoryStatus/Detail/CatStatusDetailData.php”，
数据：{category:cat，statustype:status，taskid:taskid}，
beforeSend:函数（）{
$（“#加载”）.show（）；
$（'#SelectContainer2'）.empty（）；
},
成功：功能（数据）{
$（“#cat2”）.html（数据）；
$（“#加载”）.hide（）；
},
完成：功能（数据）{
var table=$（“#cat2”）.find（“#tabl”）.DataTable({
“滚动”：“400px”，
“卷轴崩溃”：没错，
“分页”：false，
“bAutoWidth”：假，
“jQueryUI”：没错，
“订单”：[[5，“asc”]，
“表格工具”：{
“sSwfPath”：“/swf/copy\u csv\u xls\u pdf.swf”，
“阿布顿”：[
{
“性倾向”：“xls”，
“sbuttonext”：“Excel嘿！”，
“sFileName”：“*.xls”
},
]
}
});
},
错误：函数（）{
//TODO-添加错误的自动电子邮件
警报（“从服务器检索数据时出错！请尽快检查”）；
//如果出现错误，关闭模式
$（“#PacingModal”）.modal（'hide'）；
}
});
var TaskID=$（'#PacingModal'）.attr（'TaskID'）；
//var QuestionID=table2.cell（'.show'，0.data（）；
变量表2=$（'#car'）。数据表({
摧毁：没错，
“ajax”：{
“url”：“/rmsicorp/clientsite/pacingModal/surveyajax.php？TaskID=“+TaskID，
“类型”：“获取”
},
“滚动”：“400px”，
“分页”：false，
“bAutoWidth”：没错，
“栏目”：[
{
“className”：“详细信息控制”，
“可订购”：错误，
“数据”：空，
“defaultContent”：”
},
{
“数据”：“ID”，
“类型”：“隐藏”
},
{“数据”：“问题”}，
],
});
var-detailsrows=[]；
$（“#车身”）。在（'click'，'td.details control'，函数（）{
var TaskID=$（'#PacingModal'）.attr（'TaskID'）；
var tr=$（this.nexist（'tr'）；
var行=表2.行（tr）；
var cell=row.data（）；
var RowID=cell.ID；
var RID=$.inArray（tr.attr（'id'），detailsrows）；
$.ajax({
键入：“post”，
url:“/rmsicorp/clientsite/pacingModal/surveyajax2.php”，
数据：{TaskID:TaskID，QuestionID:RowID}，
数据类型：“json”，
成功：功能（结果）{
if（row.child.isShown（））{
row.child.hide（）；
tr.removeClass（“显示”）；
详图如图所示。拼接（RID，1）；
}
否则{
//控制台日志（结果）；
row.child（格式（结果））.show（）；
tr.addClass（“显示”）；
如果（RID==-1）{
detailsrows.push（tr.attr（'id'））；
}
}
}
});
});
$（“#PacingModal”）.on（'hide.bs.modal'，function（）{
//将html内容从div中清空，以便用户在单击其他选项时不会看到加载新搜索之前的最后一次搜索
$（'#cat2'）.empty（）；
$（'#SliderContainer2'）.empty（）；
$（'车'）.empty（）；
表2.clear（）.draw（）；
});
});

这是html。两个数据表都位于引导模式内的引导选项卡内

<div id="PacingModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-xl">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 id="ModalTitle" class="modal-title">Modal</h4>
            </div>
            <div class="modal-body">
                <div role="tabpanel">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist" id="ModalTabs">
                        <li role="presentation"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Category Details</a></li>
                        <li role="presentation"><a href="#PacingModalSurvey" aria-controls="Survey" role="tab" data-toggle="tab">Survey</a></li>
                        <li role="presentation"><a href="#PacingModalPhotos" aria-controls="Photos" role="tab" data-toggle="tab">Photos</a></li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="home">
                            <p id="cat"></p>
                            <div id="TablContainer">
                                <div id="cat2"></div>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="PacingModalSurvey">
                            <p id="surveyP">
                            </p>
                            <div id="surveyDiv">
                                <table id="car" class="display" cellspacing="0" width="100%" style="font-size: 12px;">
                                    <thead>
                                        <tr>
                                            <th class="details-control" style="max-width: 80px;">Expand</th>
                                            <th>ID</th>
                                            <th>Question</th>
                                            <!-- <th>NumberOfAnswers</th>
                                            <th>Answer</th>
                                            <th>Percent</th>-->
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>

                                    <tfoot>
                                        <tr>
                                            <th></th>
                                            <th>ID</th>
                                            <th>Question</th>
                                            <!--   <th>NumberOfAnswers</th>
                                            <th>Answer</th>
                                            <th>Percent</th>-->
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>



                            <style>
                                td.details-control {
                                    background: url('/rmsicorp/clientsite/images/details_open.png') no-repeat center center;
                                    cursor: pointer;
                                }

                                tr.shown td.details-control {
                                    background: url('/rmsicorp/clientsite/images/details_close.png') no-repeat center center;
                                    cursor: pointer;
                                }
                            </style>

                        </div>
                        <div role="tabpanel" class="tab-pane" id="PacingModalPhotos">


                            <div class="container">



                                <div class="row" id="FullClass">
                                    <div class="col-lg-12" style="padding-left: 0px !important; margin-bottom: 10px;">

                                        <h5 style="vertical-align: middle; text-align: center; color: black; font-size: 16px; font-weight: bold; text-transform: uppercase;">Photos</h5>
                                        <div id="SliderContainer2">
                                        </div>
                                        <div id="SelectContainer2">
                                            <h5>Please search for photos.</h5>
                                        </div>
                                        <div id="LoadingContainer2" style="vertical-align: central; text-align: center;">
                                            <img src="/images/Loading.gif" /><br />

                                            <span class="load">Loading...</span>
                                        </div>
                                    </div>
                                </div>



                            </div>
                        </div>
                    </div>

                    <p id="Loading" style="text-align: center; vertical-align: central;">
                        <img src="/Images/Loading.gif" />
                        <br />
                        <span>Loading.</span>
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

&时代；
情态动词








扩大
身份证件