2017-06-24 52 views
0

我在一個真正的捏......我的任務是使這個網站上的數據表可編輯。基本上,每一行都需要有一個編輯和刪除選項。問題在於我的數據表是通過我的數據庫表填充的,所以如果進行了任何編輯或刪除了任何行,它將需要通過更新或刪除來影響數據庫。編輯/刪除wordpress站點中的數據錶行

我對這些表有些問題在這個特定的wordpress網站上,主要涉及列的可視性和按鈕,但是,我真的有壓力讓我明天有這個工作,並且我不知所措,

我見過Editor插件在datatables.net但我很混亂d以及如何在本網站中使用它。要記住的主要事情是這是一個WordPress的網站,我的表格充滿並受phpMyAdmin中控制的數據庫影響。

我是這方面的新手,所以任何能解決問題的解決方案都令人難以置信。

我的數據庫連接和查詢:

$server = "localhost"; 
$user = "user"; 
$pw = "password" 
$db = "database"; 

$connect = mysqli_connect($server, $user, $pw, $db); 



if ($connect->connect_error) { 
die("Connection failed: " . $conn->connect_error); 
}else{ 
    //echo'success!'; 
} 

$query1 = "SELECT * FROM staging;"; 
$result1 = mysqli_query($connect,$query1); 
$query2 = "SELECT * FROM stagingSurvey;"; 
$result2 = mysqli_query($connect,$query2); 
?> 

我的用於與所述數據表代碼包括和CSS:

<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://cdn.datatables.net/buttons/1.3.1/js/buttons.colVis.min.js"></script> 
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.flash.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.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> 

</head> 
<body style="background-color:#3A6587";> 

<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: 'Blfrtip', 
buttons: [ 
'copy', 'excel', 'pdf', 'colvis' 
] 
}); 

$('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()); 

});

$('#mytableSurvey').DataTable({ 
dom: 'Blfrtip', 
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> 
+0

儘量幫助你,你是否嘗試過他們的[發電機](https://editor.datatables.net/generator/)? – jlynch630

+0

我其實沒有。你有任何使用WordPress的經驗嗎? –

+0

沒有,但是設置似乎很簡單。他們寫信只是改變包含的PHP文件連接到您的數據庫。 – jlynch630

回答

0

這不是一個完整的答案,而是一種指向不使用數據表編輯器的解決方案。過去我曾這樣做過。

如果您對ajax有一些經驗,您可以在數據表中創建一行,並在其中包含具有行ID的屬性的按鈕。然後設置一個onclick事件來發送ajax trequest到一個函數,該函數從數據庫中刪除具有該ID的行。

對於編輯我使用了https://vitalets.github.io/x-editable/它有一個非常簡單的API。

如果你想要更多的幫助,我可以通過chat