我修好了，请看下面我的回答
我有一个通过 php 填充的数据表，它显示了所有上传的文件和一些打开模式以查看/编辑/删除的按钮。文件上传在同一页面上完成，如果再次加载页面，则当前会显示新上传的文件。我想在上传完成后(在 Ajax 调用成功后)通过向表中添加一行来显示上传的文件。
我怎样才能做到这一点？
以下是我当前的代码:
<!-- How I fill the table first -->
<?php
$search = 'SELECT Id, Document, title, event_access, position_access, position_categories, status FROM $briefing WHERE Event_ID = ? ORDER BY Id DESC';
if($Result = $conn->prepare($search)) {
if ( false === $Result ) {
die('prepare() failed: ' . htmlspecialchars($conn->error));
}
$Result->bind_param('i', $cceveid_request);
$Result->execute();
$Result->store_result();
$Result->bind_result($Id, $Document, $title, $event_access, $position_access, $position_categories, $status);
$num_rows = $Result->num_rows;
?>
<table id="datatable_brief" data-ride="datatables">
<thead class="border-bottom-grey border-top-grey">
<tr>
<th width="20%" class="line-right table-sv_coordinator">Item</th>
<th width="20%" class="line-right table-sv_coordinator">Permissions</th>
<th width="20%" class="line-right table-sv_coordinator">Status</th>
<th width="20%" class="line-right table-sv_coordinator" style="border-right: none">Action</th>
</tr>
</thead>
<tbody>
<div id="erroreditstat"></div>
<?php if($num_rows > 0 ){
while ($Result->fetch()) {
if ($event_access !== "Available for all") {
$event_access = json_decode($event_access);
}
if ($position_access !== "Available for all") {
$position_access = json_decode($position_access);
}
if ($position_categories !== "Available for all") {
$position_categories = json_decode($position_categories);
}
$DocumentName = "";
$original_filename = $Document;
$DocumentName = substr( $original_filename, strpos( $original_filename, '-') + 1);
?>
<tr class="<?php echo $Id; ?>">
<td width="20%" class="padding5p">
<?php echo $title; ?>
</td>
<td width="20%" class="padding5p">
<a class="btnView"
data-id="<?php echo $Id; ?>"
data-docname="<?php echo $DocumentName; ?>"
data-title="<?php echo $title; ?>"
data-eventaccess="<?php echo $event_access; ?>"
data-posaccess="<?php echo $position_access; ?>"
data-poscataccess="<?php echo $position_categories; ?>"
data-status="<?php echo $status; ?>">View</a>
<a class="btnEdit"
data-id="<?php echo $Id; ?>"
data-eventaccess="<?php echo $event_access; ?>"
data-posaccess="<?php echo $position_access; ?>"
data-poscataccess="<?php echo $position_categories; ?>"><i class="fa fa-pencil"></i> Edit</a>
</td>
<td width="20%" class="padding5p">
<span class="personal_detail_holder" data-hold="<?php echo $Id; ?>" id="personal_briefStatus_holder">
<?php if($status=='Active')echo 'Active';else echo 'Inactive';?>
</span>
<a class="btn_personal_edit" editfor="personal_briefStatus" id="personal_briefStatus_btn_edit" data-id="<?php echo $Id; ?>" href="javascript:void(0)" onclick="showField(this.id,$(this).attr('data-id'))">
<i class="fa fa-pencil"></i> Edit
</a>
<div class="personal_detail_edit_box" data-holder="<?php echo $Id; ?>" id="personal_briefStatus_btn_edit_box" style="display:none;">
<select class="form-control m-b" name="briefStatus" data-save="<?php echo $Id; ?>" id="briefStatus">
<option value="Active" <?php if($status=='Active') echo 'selected="selected"';?>>Active</option>
<option value="Inactive" <?php if($status=='Inactive') echo 'selected="selected"';?>>Inactive</option>
</select>
<div style="clear:both"></div>
<div class="align-center">
<a class="btn_personal_save" editfor="personal_briefStatus" href="Javascript:void(0)" onclick="editData('briefStatus','personal_briefStatus','<?php echo $Id; ?>');">Save</a> -
<a class="btn_personal_cancel" data-cancel="<?php echo $Id; ?>" editfor="personal_briefStatus" href="javascript:void(0)" onclick="cancelField('personal_briefStatus', '<?php echo $Id; ?>');">Cancel</a>
</div>
</div>
</td>
<td width="20%" class="padding5p">
<a class="btnDelete" data-id="<?php echo $Id; ?>" style="float:left;"><i class="fa fa-remove text-danger text"></i> Delete</a>
</td>
</tr>
<?php
}
}
}
?>
</tbody>
</table>
<!-- Initial datatable js & file upload function -->
<script type="text/javascript">
$( document ).ready(function() {
$('#datatable_brief').dataTable({"sPaginationType": "full_numbers","aaSorting": [[0,'desc']],"dom":' <"search"f><"top"l>rt<"bottom"ip><"clear">'});
});
function submitNew(e){
e.preventDefault;
var value = $("#Document").val();
var title = $('#title_doc').val();
if (title !== '') {
if(value.length >= 1 && value !== '') {
var file_data = $("#Document").prop("files")[0];
var action = 'briefingdoc';
var form_data = new FormData();
form_data.append("action", action);
form_data.append("title", title);
form_data.append("file", file_data);
form_data.append("cceveid", <?php echo $_REQUEST['cceveid']; ?>);
if(selectedValues == '' || selectedValuesPos == '' || selectedValuesPosCat == '') {
alert('Please select at least one option for each.');
} else {
$.ajax({
type: "post",
url:"pages_ajax/ajax-eventhandbook.php",
cache: false,
contentType: false,
processData: false,
data: form_data,
success: function(msg) {
console.log('done');
// this does not work
$('#datatable_brief').dataTable({"bDestroy": true});
}
});
}
}
} else {
showError(title);
}
}
</script>
<!-- File Upload -->
<form name="category_frm" id="category_frm_b" method="post" action="Javascript:void(0)" parsley-validate enctype="multipart/form-data" class="bs-example form-horizontal">
<div class="form-group">
<button data-toggle='' id='customuploadhb' data-id="" class='btn btn-default' style="line-height: 1;margin-top: 10px">
<i class='fa fa-cloud-upload text'></i>
<span class='text'>Upload</span>
<i class='fa fa-check text-active'></i>
<span class='text-active'>Success</span>
</button>
<input type="file" id="Document" name="Document" value="<?php if(!empty($Document)) { echo $Document; }?>" placeholder="Add new" class="input-sm form-control data-required" parsley-required="true" >
</div>
<button type="button" class="btn btn-white btn-next cust_home event_wizard" data-last="Finish" id="btnnext" onclick="submitNew(event);">Finish</button>
</form>
最佳答案
啊哈时刻来的有点晚 - 我只是发送了新的 <tr>具有所有数据属性并使用 append()在 Ajax 成功后将其作为新行添加到表中。
为我的 tbody 添加了一个 id - <tbody id="afterajax">
然后将ajax成功改成:
$.ajax({
type: "post",
url:"pages_ajax/core_event/staff_&_volunteer_HQ/ajax-eventhandbook.php",
cache: false,
contentType: false,
processData: false,
data: form_data,
success: function(msg) {
$("#afterajax").append(msg);
}
});
但是现在我得到了新行，.btnView - .btnDelete 这些点击事件不起作用。
// Delete
$('.btnDelete').click(function() {
var id = $(this).attr('data-id');
deleteRow(id);
});
// View
$('.btnView').click(function() {
var id = $(this).attr('data-id');
var docname = $(this).attr('data-docname');
var title = $(this).attr('data-title');
var eventaccess = $(this).attr('data-eventaccess');
var poscataccess = $(this).attr('data-poscataccess');
var posaccess = $(this).attr('data-posaccess');
var status = $(this).attr('data-status');
viewRow(id,docname,title,eventaccess,posaccess,poscataccess,status);
});
所以我将它们更改如下:
// Delete
$(document).off( "click", '.btnDelete' );
$(document).on("click", '.btnDelete', function(event) {
event.preventDefault();
var id = $(this).attr('data-id');
deleteRow(id);
});
// View
$(document).off("click", '.btnView');
$(document).on("click", '.btnView', function() {
var id = $(this).attr('data-id');
var docname = $(this).attr('data-docname');
var title = $(this).attr('data-title');
var eventaccess = $(this).attr('data-eventaccess');
var poscataccess = $(this).attr('data-poscataccess');
var posaccess = $(this).attr('data-posaccess');
var status = $(this).attr('data-status');
viewRow(id,docname,title,eventaccess,posaccess,poscataccess,status);
});
关于php - 文件上传ajax后向dataTable添加新行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32543875/