繁体   English   中英

编辑/删除wordpress站点中的数据表行

[英]Editing/deleting datatable rows in wordpress site

我真的很紧张....我的任务是让这个网站上的数据表可编辑。基本上,每一行都需要有一个编辑和删除选项。一个问题是我的数据表是通过我填充的数据库表,因此如果进行了任何编辑或删除了任何行,则需要通过更新或删除来影响数据库。

我在这个特定的wordpress网站上遇到了这些表的一些问题,主要涉及列可见性和按钮。 然而,我真的有压力让我明天工作,我不知所措。

我在datatables.net上看过编辑器插件,但我对如何在这个网站中使用它感到很困惑。 要记住的主要事项是这是一个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>

这不是一个完整的答案,而是一种指向不使用dattables编辑器的解决方案的方法。 我过去这样做过。

如果您对ajax有一些经验,可以使用一个按钮在数据表中创建一行,其中包含一个带有行ID的属性。 然后设置onclick事件以将ajax trequest发送到一个函数,该函数从数据库中删除具有该ID的行。

对于编辑,我使用了https://vitalets.github.io/x-editable/ ,它有一个非常简单的API。

如果您需要更多帮助,我可以尝试通过聊天帮助您

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM