【发布时间】：2018-04-16 21:00:59
【问题描述】：
每次显示我的表格时，我都会在<th> 中添加一个额外的排序箭头。
这是问题的图片：
我的列也没有正确对齐。它只是有时发生，有时它工作正常。如果我单击/排序表格，则列对齐正确。这是该问题的图片链接：
我每次都必须用不同的数据重新初始化表，所以我有这个：
$('#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();
});
});
这里是 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">×</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>
【问题讨论】：
-
该页面的链接会很好。尝试将
$('#car').empty(); table2.clear().draw();替换为table2.clear().destroy();。 -
谢谢，但没有解决任何问题。
-
请send me a link。这是无关的，但也不允许
"type": "hidden"，请参阅columns.type。如果要隐藏该列，请使用 columns.visible 而不是"visible": false。 -
是的，我知道“可见”：假
-
首席开发人员刚刚告诉我，我无法授予访问权限。对不起。
标签： jquery datatables