2017-06-08 72 views
0

我已經嘗試了幾天,沒有運氣的日子。我有一個活躍的主題和工作數據表的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> 
+0

檢查我的答案,不要忘記upvote或接受幫助你的答案:) –

回答

1

你的WordPress網站可能會使用一個更高達jQuery的數據表的最新版本。

按照here,colvis不再使用。

而應該創建自己的按鈕,將滿足您的需求

修改這一部分:

buttons: [ 
    'colvis' 
] 

dom: 'Bfrtip', 
buttons: ['csv', 
       [ 
         { 
          text: 'Hide Column', 
          className: 'classNameSoYouCanApplyMoreJSCode', 
          action: function (e, dt, node, config) { 

           //code to hide the column. 

          } 
         } 
       ] 
      ] 

爲了說明,默認的按鈕(如csv)能聲明像這樣,並且可以在默認按鈕之後聲明自定義按鈕,格式如上。

編輯:

現在,有可能是很好的理由,爲什麼他們刪除的colvis按鈕標籤,但如果你的數據表在以前的項目工作,與它..然後請去好了。

+0

我很抱歉,我剛剛回到網上。我剛剛剛剛開始使用JS做這件事,你認爲你可以幫我一點,我將如何讓按鈕做我需要做的事情? –

+0

此外,這個問題似乎一般考慮按鈕,因爲如果我添加csv按鈕,它也不會出現 –

+1

瞭解,讓我看看我能做些什麼。在我完成工作後(ETA從現在起4小時),我會編輯我的答案,但您也可以查看[here] [1]以及:) [1]:https://datatables.net/examples /api/show_hide.html –