数据表列错位和重复排序箭头问题 [英] Datatables Column Misalignment and Duplicate sort arrow issue
问题描述
每次显示表格时，都会在 这是问题的图片: 我也遇到了列未正确对齐的问题.它只是偶尔发生，其他时候它工作正常.如果我单击/排序表格，列会正确对齐.这是该问题的图片链接: 我每次都必须用不同的数据重新初始化表，所以我有这个: 如果您知道完全销毁并重新创建它的更好方法，请告诉我.我认为这可能会导致列对齐问题. 这是Javascript代码. 这是html.两个数据表都位于引导程序模态内的引导程序选项卡内. <div class="modal-body"><div role="tabpanel"><!-- 导航标签 --><ul class="nav nav-tabs" role="tablist" id="ModalTabs"><li role="presentation"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">分类详情</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">照片</a></li><!-- 标签窗格--><div class="tab-content"><div role="tabpanel" class="tab-pane active" id="home"><p id="猫"></p><div id="TablContainer"><div id="cat2"></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;"><头><tr><th class="details-control" style="max-width: 80px;">展开</th><th>ID</th><th>问题</th><!-- <th>NumberOfAnswers</th><th>Answer</th><th>百分比</th>--></tr></thead> <风格>td.details-control {背景: url('/rmsicorp/clientsite/images/details_open.png') 无重复中心；光标:指针；}tr.shown td.details-control {背景: url('/rmsicorp/clientsite/images/details_close.png') 无重复中心；光标:指针；}</风格> <div role="tabpanel" class="tab-pane" id="PacingModalPhotos"><div class="容器"><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;">照片</h5><div id="SliderContainer2"> <div id="SelectContainer2"><h5>请搜索照片.</h5> <div id="LoadingContainer2" style="vertical-align: central; text-align: center;"><img src="/images/Loading.gif"/><br/><span class="load">加载中...</span> <p id="Loading" style="text-align: center; vertical-align: central;"><img src="/Images/Loading.gif"/><br/><span>加载.</span></p> <div class="modal-footer"><button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button> 你的代码有很多问题: 列未对齐，因为表在隐藏时被初始化.一旦需要，您需要使用 columns.adjust() 重新调整列宽选项卡和表格变得可见: 您试图错误地隐藏列ID"，除了隐藏列在销毁表时会导致一些问题.我已经完全消除了 ID 列. 应该使用 您正在另一个事件处理程序中添加其他事件处理程序 还有这里没有提到的其他小问题. 请参阅下面的示例以获取更正的代码. <div id="PacingModal" class="modalfade" role="dialog"><div class="modal-dialog modal-xl"><!-- 模态内容--><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 class="modal-body"><div role="tabpanel"><!-- 导航标签 --><ul class="nav nav-tabs" role="tablist" id="ModalTabs"><li role="presentation"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">分类详情</a><li role="presentation"><a href="#PacingModalSurvey" aria-controls="Survey" role="tab" data-toggle="tab">Survey</a><li role="presentation"><a href="#PacingModalPhotos" aria-controls="Photos" role="tab" data-toggle="tab">照片</a><!-- 标签窗格--><div class="tab-content"><div role="tabpanel" class="tab-pane active" id="home"><p id="猫"></p><div id="TablContainer"><div id="cat2"></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;"><头><tr><th class="details-control" style="max-width: 80px;">展开</th><th>问题</th></tr></thead> <风格>td.details-control {背景:URL(数据:图像/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 ==)无重复中心；光标:指针；}tr.shown td.details-control {背景:URL(数据:图像/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 =)无重复中心；光标:指针；}</风格> <div role="tabpanel" class="tab-pane" id="PacingModalPhotos"><div class="容器"><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;">照片</h5><div id="SliderContainer2"> <div id="SelectContainer2"><h5>请搜索照片.</h5> <div id="LoadingContainer2" style="vertical-align: central; text-align: center;"><img src="/images/Loading.gif"/><br/><span class="load">加载中...</span> <p id="Loading" style="text-align: center; vertical-align: central;"><img src="/Images/Loading.gif"/><br/><span>加载.</span></p> <div class="modal-footer"><button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button> </html> 参见 jQuery DataTables – 列宽问题带有 Bootstrap 选项卡，用于解决 jQuery DataTables 和 Bootstrap 选项卡的最常见问题. Each time I display my table I get an additional sort arrow added to the 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: 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. Here is the Javascript code. And here is the html. Both datatables are inside bootstrap tabs inside a bootstrap modal.
There are many problems with your code: 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:
You're trying to hide column "ID" incorrectly, besides hidden column causing some issues while destroying the table. I have eliminated ID column completely. Table should be cleared and destroyed using You're adding other event handlers inside another event handler There were other minor issues not mentioned here. See the example below for corrected code.
See jQuery DataTables – Column width issues with Bootstrap tabs for solution to the most common problems with jQuery DataTables and Bootstrap Tabs. 这篇关于数据表列错位和重复排序箭头问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ 中添加一个额外的排序箭头. $('#car').empty();table2.clear().draw();函数格式(注释){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</';out += 'SOLUTION
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){$($.fn.dataTable.tables(true)).DataTable().columns.adjust();});$(selector).DataTable().clear().destroy()清除和销毁表格.$('#PacingModal').on('shown.bs.modal', function(){});导致对其他事件处理程序的不必要的多次调用.函数格式(注释){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</';out += '<头><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><身体><div class="container text-center"><button id="btn-show" class="btn btn-primary">显示对话框</button>链接
<th>.$('#car').empty();
table2.clear().draw();
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();
});
});
<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
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
$($.fn.dataTable.tables(true)).DataTable()
.columns.adjust();
});
$(selector).DataTable().clear().destroy().$('#PacingModal').on('shown.bs.modal', function(){}); which leads to unnecessary multiple calls to other event handlers.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>LINKS
登录
关闭
