我已經嘗試了幾天,沒有運氣的日子。我有一個活躍的主題和工作數據表的wordpress網站。在過去,我不得不修改典型的數據表代碼,使其適合滾動和固定搜索欄等。Datatables/JQuery Wordpress問題
當前問題是我的列可見性按鈕不會以任何方式顯示,形狀或形式。如果我將代碼複製到我的測試網站,它完美的工作,所以我知道代碼在技術上是正確的,包括/ 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或接受幫助你的答案:) –