0
私はこれに運がない日と数日間試してみました。私はアクティブなテーマと作業datatableとワードプレスサイトを持っています。過去には、スクロールや固定検索バーなどで正常に動作するように、標準的なデータ可能コードを少し修正しなければなりませんでした。WordPressのDatatables/JQueryで
現在の問題は、列の可視性ボタンが表示されないことです、形状または形態。テストサイトにコードをコピーすると完全に動作するので、コードは技術的に正しいと思いますが、インクルード/ CSSは正しいですが、Wordpress環境でこれを行う別の方法があれば、おそらく追加することでボタンまたは何か。
テーブル（ボタンが表示されない）とのライブサイトでは、すべてのこれですべてのヘルプははるかに高く評価されてtesting.uwsinc.net/dashboardtest
です。
<head>
<title>Dashboard</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
<style type="text/css">
#select-tables{
width: 250px;
}
table,td,th{
border:1px solid black;
}
table{
border-collapse: collapse;
width:100%;
}
td{
border-collapse: collapse;
/*border-right: none;
border-left: none;*/
}
th{
padding-left: 10px;
padding-right:10px;
}
td{
padding-left: 10px;
padding-right:10px;
}
input[type=submit]{
border: 1px solid grey;
color:black;
font-size:12px;
}
table.dataTable tbody th,
table.dataTable tbody td {
white-space: nowrap;
}
.dataTables_scroll
{
overflow:auto;
width: 965px;
}
.datatable{
width: 100% !important;
}
a.dt-button{
color:red;
}
</style>
</head>
<body>
//this section creates a drop down to show/hide one of the 2 tables
<label style="font-weight:bold;">Select the table you would like to view:</label></br>
<select name='tables' id='select-tables'>
<option value="mytable">Survey Test Table</option>
<option value="mytableSurvey">Survey Only</option>
</select>
</br>
//this code starts the datatables
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$('#mytable').DataTable({
dom: 'Blfrtip',
buttons: [
'colvis'
]
});
$('#mytableSurvey').DataTable({
dom: 'Blfrtip',
buttons: [
'colvis'
]
});
$('.dataTable').wrap('<div class="dataTables_scroll" />');
$(document).on('change' , '#select-tables', function(){
var table = $(this).val();
$('#' + table +'_wrapper').show();
$('[id$="_wrapper"]').not('#' + table +'_wrapper').hide();
});
$("#select-tables").trigger("change");
});
}(jQuery));
</script>
UPDATE：動的に非表示に
新しい方法は、また、動作していない：
<script type="text/javascript">
(function($) {
$(document).ready(function() {
var table = $('#mytable').DataTable({
});
$('a.toggle-vis').on('click', function (e) {
e.preventDefault();
// Get the column API object
var column = table.column($(this).attr('data-column'));
// Toggle the visibility
column.visible(! column.visible());
});
$('.dataTable').wrap('<div class="dataTables_scroll" />');
$(document).on('change' , '#select-tables', function(){
var table = $(this).val();
$('#' + table +'_wrapper').show();
$('[id$="_wrapper"]').not('#' + table +'_wrapper').hide();
});
$("#select-tables").trigger("change");
});
}(jQuery));
</script>
私の答えをチェックしてください。あなたを助けてくれた回答をupvoteまたは受け入れることを忘れないでください。 –