我有一个wordpress网站没有正确显示我的数据表的按钮。在过去,我必须帮助重新格式化传统的数据表代码,以便在wordpress网站上正确显示,我希望发生的事情是什么这里。
可以在testing.uwsinc.net/dashboardtest上看到包含表格的页面。
其他选项似乎工作正常,但根本没有按钮显示。但是,如果我在我的测试网站上尝试这个,它会显示并完美运行。这可能是一场JS冲突,但我已经脱离了我的专业领域,而且我已经在这里工作了几天而没有运气。非常感谢任何有用的提示,我只需要在此数据表中添加列显示/隐藏选项。
<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>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.15/filtering/row-based/range_dates.js"></script>
</head>
<body>
<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>
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$('#mytable').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'excel', 'pdf', 'colvis'
]
});
$('#mytableSurvey').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'excel', 'pdf', '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>
应该如何看待:
它看起来如何: