数据表列错位和重复排序箭头问题

每次我显示我的表时，我都会在

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

这是问题的图像： 问题1

我的列也没有正确对齐的问题。 它有时只会发生，有时它可以正常工作。 如果单击/排序表，列会正确对齐。 以下是该问题的图片链接： 问题2

我必须每次使用不同的数据重新初始化表，所以我有这个： 

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

如果你知道一个更好的方法来完全破坏并重新创建它，请告诉我。 我认为这可能导致列对齐问题。

这是Javascript代码。 

 function format(notes) { var object = notes.data; var out = ''; out += ''; out += ''; for (var i in object) { out += '' } out += '
Answer# of AnswersPercent
' + object[i].Answer + '' + object[i].NumberOfAnswers + '' + object[i].Percent + '
'; 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(); }); });

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

解

您的代码存在许多问题：

  1. 列未对齐，因为表在被隐藏时被初始化。 一旦需要选项卡和表变为可见，您需要使用columns.adjust（）重新调整列宽： 

     $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){ $($.fn.dataTable.tables(true)).DataTable() .columns.adjust(); });

  2. 你试图隐藏列“ID”错误，除了隐藏列导致一些问题，同时销毁表。 我完全删除了ID列。

  3. 应使用$(selector).DataTable().clear().destroy()清除和销毁表。

  4. 您正在另一个事件处理程序$('#PacingModal').on('shown.bs.modal', function(){});添加其他事件处理程序$('#PacingModal').on('shown.bs.modal', function(){}); 这导致对其他事件处理程序的不必要的多次调用。

还有其他未提及的小问题。

有关更正的代码，请参阅下面的示例 

 function format(notes) { var object = notes.data; var out = ''; out += ''; out += ''; for (var i in object) { out += '' } out += '
Answer# of AnswersPercent
' + object[i].Answer + '' + object[i].NumberOfAnswers + '' + object[i].Percent + '
'; return out; } $(document).ready(function() { // AJAX emulation for demonstration only $.mockjax({ url: '/rmsicorp/clientsite/pacingModal/surveyajax2.php', responseTime: 200, responseText: { "data": [{ "Answer": 1, "NumberOfAnswers": 2, "Percent": 3 }, { "Answer": 1, "NumberOfAnswers": 2, "Percent": 3 }, { "Answer": 1, "NumberOfAnswers": 2, "Percent": 3 }] } }); // AJAX emulation for demonstration only $.mockjax({ url: '/rmsicorp/clientsite/pacingModal/surveyajax.php', responseTime: 200, responseText: { "data": [{ "ID": 1, "Question": "Question" }, { "ID": 2, "Question": "Question" }, { "ID": 3, "Question": "Question" }] } }); // AJAX emulation for demonstration only $.mockjax({ url: '/rmsicorp/ClientSite/Reset/CategoryStatus/Detail/CatStatusDetailData.php', responseTime: 200, responseText: '
No data
' }); $('#btn-show').on('click', function() { var box = $('#PacingModal').modal(); }); $('#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", "type": "get" }, "scrollY": "400px", "scrollCollapse": true, "paging": false, "bAutoWidth": true, "columns": [{ "className": 'details-control', "orderable": false, "data": null, "defaultContent": '' }, { "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('hidden.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').DataTable().clear().destroy(); }); $('#ModalTabs a[data-toggle="tab"]').on('shown.bs.tab', function(e) { if ($(e.target).attr('href') === '#PacingModalSurvey') { $('#car').DataTable().columns.adjust(); } }); });
Interesting Posts

如何摆脱jQuery Data Table插件的分页？

DataTable服务器端处理添加编辑列

jQuery DataTable ColumnFilter插件。 “选择”filter样式是否支持完全匹配？

jQuery数据表中的列排序

数据表标题未对齐

jQuery Datatables定制DOM

编辑jQuery dataTables信息

动态更改设置值？

jQuery Datatable搜索选项（按字母顺序排列）

Jquery数据表 – Excel导出不起作用