数据表列未对齐和重复的排序箭头问题 [英] Datatables Column Misalignment and Duplicate sort arrow issue
本文介绍了数据表列未对齐和重复的排序箭头问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
每次显示表格时，都会向<th>添加一个附加的排序箭头.
Each time I display my table I get an additional sort arrow added to the <th>.
以下是问题的图片:
Here is an image of the issue:
我的列也无法正确对齐，这也是一个问题.它只会在某些时候发生，而在其他时候则可以正常工作.如果我单击/排序表，则各列对齐将正确对齐.这是该问题的图像链接:
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:
每次都要用不同的数据重新初始化表，所以我要这样做:
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.
这是Javascript代码.
Here is the Javascript 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();
});
});
这是html.这两个数据表都在引导程序模式内的引导程序选项卡中.
And here is the html. Both datatables are inside bootstrap tabs inside a bootstrap modal.
<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">×</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>
推荐答案
解决方案
您的代码有很多问题:
SOLUTION
There are many problems with your code:
-
列未对齐，因为表在隐藏时已初始化.您需要一次使用 columns.adjust()重新调整列宽.标签和表格可见:
Columns are misaligned because table is initialized while being hidden. You need to readjust column widths using columns.adjust() once required tab and table becomes visible:
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
$($.fn.dataTable.tables(true)).DataTable()
.columns.adjust();
});
您正在尝试错误地隐藏列"ID"，除了隐藏列会在破坏表时导致一些问题.我已经完全消除了ID列.
You're trying to hide column "ID" incorrectly, besides hidden column causing some issues while destroying the table. I have eliminated ID column completely.
表应使用$(selector).DataTable().clear().destroy()清除并销毁.
您要在另一个事件处理程序$('#PacingModal').on('shown.bs.modal', function(){});中添加其他事件处理程序，这会导致对其他事件处理程序的不必要的多次调用.
You're adding other event handlers inside another event handler $('#PacingModal').on('shown.bs.modal', function(){}); which leads to unnecessary multiple calls to other event handlers.
还有其他一些未提及的小问题.
There were other minor issues not mentioned here.
请参见下面的示例以获取更正的代码.
See the example below for corrected code.
function format(notes) {
var object = notes.data;
var out = '<table class="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;
}
$(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: '<p class="text-center">No data</p>'
});
$('#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();
}
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
</head>
<body>
<div class="container text-center">
<button id="btn-show" class="btn btn-primary">Show Dialog</button>
</div>
<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">×</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>Question</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th></th>
<th>Question</th>
</tr>
</tfoot>
</table>
</div>
<style>
td.details-control {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAACjElEQVR4Aa2V30uTURjHnVBUgglCaXVTJJVLMdhQm7+1JEvJiKAggmgSQiKJl0V0E13UVf0HQZmBLcvlpqa55tqV0YoMzIhY6js0yDH11X17vuO8Sq5Zgl/48DznPD/G63nOMSmBkoUNwhYhTUgn9NUeY8z5p0wqOVXYKRwQLMJhhYV7Kpaqck2rNdskbBPMdrv9osfjcQaDwW/RaHSR0OceY8xhrqox/a3ZZmGHkO9wOB7ouj6PBGKMOcxlzcqmdDYKGZmZmSWjo6PvIYosRuDWXGj50IwTb4+hxleN5sAVvJh4jvBCGBRzWSO121UPk3EAaUKuz+d7ycTp+Wnc/nwL1d4qHBVidmjZv/npBkJzGiiv19vFWmGrcVDsvKupqeky/056VMf1j9dQOViBKo9Aa/ixdbnYcrQGWsBc1jQ2NtrZQ/VKShHM8kvdEPVN9qJsoBRl/aUoHyiJ+UpcCxJTtmfCDYoHJT2yYyOlPtcaCoUmGGwdbkVRbxGK+2y0gg2GisUvNmJCy/BVUJqm/eBIxXqpgbUtiBise12HQlc+ClwFSKRCiZH6wXpQs7OzETWn6XENa/trYemywuK0IpGsTotgRU3fcVBzouWG6pOnpqY0BhuGGpDXeUjIW7JKcfuX3tjjP9k4FBkZN4PtY+042JGzzNMcGDJ35C7tmcU++tJmjE63OpSUuLEJ62GcfXUO+59kr8rJnlOY0WfAGtYaY/PHYPv9fhdEY7++4nz/BWS17UPWY0Es2avWp3vOYOTnCCheBtaqHskJr95kZBL3AvdR2XkEex5mYbdQ+qwCd97dRTAcXHn1Moyrt16PA2tN//V8jY+Pf4cS/VWerzU9sDay1gd2Xf4F/AZqlpeB9836LwAAAABJRU5ErkJggg==)
no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAACdUlEQVR4Aa2V30tTYRjHVSgsoQKhXPUPlKZMlImiIIg/pggiiDeCBAdqyC4Kf9zVhVdeelX33QnCbtYvxZsxxkoqKxiz1SzdFudMb5xO5/bt+fa+sPCw3IVf+PA+532e5ytn53lfK0qoSrggXBauCbUKxtxjjjVnq1IXXxFuCXeEFqGdMOYec6zRtZX/M6sWrgv1hmHcDwQCLxOJxM9CoZAnjLnHHGt0bbXdVG1cEm4KLp/P9yKXyx2jhJhjDWvZc9qUwUWhzuFwdMVisc8QFQ4PcbCygvT0NJLDw0gNDSH96DEyfj8KmQwo1rJHem8oD2VapX/sxlAo9Aqi/N4e9hYWsDMwgARxD2DH7ZZYren5eZxYFqhgMOhnr3BVeSnn216v98Hf3yqXg/X0CX719YFs9/WquJfPGtkzZ2fBWvZ4PB6DHtqrokaol7/0GqLM2hq2enpsxMmpvf3VVVD8UOJxV42Uet1Wy7J+M5mam8P37u6ySM7MgDJNM8mRUl5qYDtOREz+GB3FZlcXNjs7UUrMk/jYGKhsNnuo57TWZhgTw0hHO0EpRdpV/tvICKgjUdFQv/Lu7q7JZHxqCl9dLqGtSJtL4VJ80Wvc8xD2V9YfRUbmLZPp5WVstLTYaSWt+lmt1tISKH5Q/VFqbGOTl6GNTk7iQ3Oz4FSrU8UfuTqdBJHxceQz+2APe/8Zm+Jgh8PhNxBlt7YQNQysNzVivbEJ7wXGiiZEJiZwEI2C4mFgr/aoKnn0jk0TiWfPsTE4iHcN9xBuaMCn/n5sLy7iKJk8ffTqikfvfC4H9laWdX2lUqltaDEu9/o664LtIOVfsOf4L+APb5yaiwyN8+8AAAAASUVORK5CYII=)
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>
</body>
</html>
请参见 jQuery DataTables –列宽问题带有Bootstrap选项卡，以解决jQuery DataTables和Bootstrap选项卡中最常见的问题.
See jQuery DataTables – Column width issues with Bootstrap tabs for solution to the most common problems with jQuery DataTables and Bootstrap Tabs.
这篇关于数据表列未对齐和重复的排序箭头问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
