2017-06-24 3 views
0

Ich bin in einer echten Prise .... Ich hatte die Aufgabe, die Daten auf dieser Website editierbar zu machen. Grundsätzlich muss jede Zeile eine Option zum Bearbeiten und Löschen haben Problem ist die Tatsache, dass meine Daten über meine Datenbanktabelle gefüllt werden, also wenn Änderungen vorgenommen oder Zeilen gelöscht werden, muss die Datenbank durch Update oder Löschen beeinflusst werdenBearbeiten/Löschen von Datenzeilen in Wordpress-Site

Ich hatte einige Probleme mit diesen Tabellen auf dieser speziellen Wordpress-Website, hauptsächlich mit Spalten Sichtbarkeit und Schaltflächen, aber ich habe wirklich den Druck auf mich, um dies von morgen funktioniert und ich bin ratlos.

Ich habe das Editor-Plugin gesehen auf datatables.net aber ich bin sehr verwirrt d mit, wie man es in dieser Site benutzt. Die wichtigsten Dinge zu beachten ist, ist dies eine Wordpress-Site und meine Tabelle ist gefüllt und beeinflusst von einer Datenbank in phpMyAdmin gesteuert.

Ich bin sehr ein Neuling in diesem Bereich, so dass jede Lösung, die funktionieren wird, unglaublich geschätzt wird.

Meine Datenbank-Verbindung und Abfrage:

$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); 
?> 

Mein Code für die Datentabellen mit umfasst und 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

Haben Sie ihre [Generator] versucht (https://editor.datatables.net/generator/)? – jlynch630

+0

Ich habe eigentlich nicht. Hast du irgendwelche Erfahrung damit auf WordPress? –

+0

Keine, jedoch scheint das Setup einfach genug zu sein. Sie schreiben, um einfach die enthaltenen PHP-Dateien zu ändern, um eine Verbindung zu Ihrer Datenbank herzustellen. – jlynch630

Antwort

0

Dies ist keine vollständige Antwort, sondern eine Möglichkeit, Sie auf eine Lösung ohne Verwendung des Editors dattables hinzuweisen. Ich habe es in der Vergangenheit so gemacht.

Wenn Sie Erfahrung mit Ajax haben, können Sie eine Zeile in Datatables mit einer Schaltfläche erstellen, in die Sie ein Attribut mit der Zeilen-ID aufnehmen. Richten Sie dann ein onclick-Ereignis ein, um eine AJAX-Anweisung an eine Funktion zu senden, die die Zeile mit dieser ID aus der Datenbank löscht.

Für die Bearbeitung habe ich https://vitalets.github.io/x-editable/ verwendet, die eine sehr einfache API hat.

Falls Sie noch mehr Hilfe, die ich Hilfe versuchen, können Sie durch chat

Verwandte Themen