我有一个使用dataTables和Ajax填充表的脚本。我想做的是将新记录添加到基础MySQLi表中时,是为了刷新屏幕上表视图中的数据。
下面的脚本是插入新记录的代码,可以正常工作。我该如何强制刷新屏幕上的数据。我查看了谈论此问题的帖子数量以及大多数答案 使用dataTablesw“重绘”,但我看不到它是如何工作的。任何帮助都会很棒。
$("#insert_promotion").submit(function(event){
var hotelid = "<?php echo $_SESSION['_amember_user']['hotelid'];?>";
var roomid = $('#RoomID').val();
var roomname = $('#RoomName').val();
var companyimage = $('#company_image_1').val();
var clientname = $('#client_name').val();
var fromdate = $('#FromDate').val();
var fromhours = $('#RoomFromTimeH').val();
var frommins = $('#RoomFromTimeM').val();
var todate = $('#ToDate').val();
var tohours = $('#RoomToTimeH').val();
var tomins = $('#RoomToTimeM').val();
var fromdisplaytimeh = $('#FromDisplayTimeH').val();
var fromdisplaytimem = $('#FromDisplayTimeM').val();
var displaytext = $('#DisplayText').val();
var lookupimage = $('#NewBrowse').val();
var roomlevel = $('input[name=RoomLevel]:checked', '#insert_promotion').val()
var displaylevel = $('input[name=DisplayLevel]:checked', '#insert_promotion').val()
var boardlevel = $('input[name=BoardLevel]:checked', '#insert_promotion').val()
event.preventDefault();
var form = $('form')[0];
var formData = new FormData(form);
formData.append("RoomID", roomid);
formData.append("RoomName", roomname);
formData.append("CompanyImage", companyimage);
formData.append("ClientName", clientname);
formData.append("RoomFromDate", fromdate);
formData.append("RoomToDate", todate);
formData.append("RoomFromTimeH", fromhours);
formData.append("RoomFromTimeM", frommins);
formData.append("RoomToTimeH", tohours);
formData.append("RoomToTimeM", tomins);
formData.append("FromDisplayTimeH", fromdisplaytimeh);
formData.append("FromDisplayTimeM", fromdisplaytimem);
formData.append("DisplayText", displaytext);
formData.append("ClientImageName", lookupimage);
formData.append("RoomLevel", roomlevel);
formData.append("DisplayLevel", displaylevel);
formData.append("BoardLevel", boardlevel);
formData.append('image_field', $('input[type=file]')[0].files[0]);
$(".progress-bar").animate({
width: "100%"
}, 2500);
$.ajax({
url:"insert_new_conference.php",
data: formData,
type: 'POST',
cache: false,
contentType: false,
processData: false,
}).done(function(response){
$('.progress-bar').attr('style', "width: 0%");
$("#previewtext").html("");
$("#NewPreview").html("");
$('#insert_promotion')[0].reset();
$(this).closest('form').find("input[type=text], textarea").val("");
$('#FromDate').datepicker('setDate', null);
$('#ToDate').datepicker('setDate', null);
select_box = document.getElementById("RoomFromTimeH");
select_box.selectedIndex = "00";
select_box = document.getElementById("RoomFromTimeM");
select_box.selectedIndex = "00";
select_box = document.getElementById("RoomToTimeH");
select_box.selectedIndex = -1;
select_box = document.getElementById("RoomToTimeM");
select_box.selectedIndex = -1;
$('#RoomLevel_1').prop('checked', false);
$('#RoomLevel_2').prop('checked', true);
$('#RoomLevel_3').prop('checked', false);
$('#RoomLevel_4').prop('checked', false);
$('#DisplayLevel_1').prop('checked', false);
$('#DisplayLevel_2').prop('checked', true);
$('#DisplayLevel_3').prop('checked', false);
$('#DisplayLevel_4').prop('checked', false);
$('#BoardLevel_1').prop('checked', true);
$('#BoardLevel_2').prop('checked', false);
$("#ShowBar").hide();
$('#add_data_modal').modal("hide");
$.ajax({
url: 'get_conf_bookings.php',
type: 'get',
dataType: 'JSON',
success: function(response){
var len = response.length;
$("#userTable tbody").html("");
for(var i=0; i<len; i++){
var recordid = response[i].RecordID;
var roomid = response[i].RoomID;
var roomname = response[i].RoomName;
var clientimage = response[i].ClientImageNameAdminSmall;
if(clientimage == null){
var imagepath = '../images/no-image.png';
} else {
var imagepath = '../../../../conf/conf_images/adminsmall/'+ clientimage;
}
var rowspacer = '../images/row-spacer.png';
var clientname = response[i].ClientName;
var fromdate = response[i].RoomFromDateTime;
var StartDate = response[i].RoomFromDate;
var fromtime = response[i].RoomFromTime;
var todate = response[i].RoomToDateTime;
var totime = response[i].RoomToTime;
var EndDate = response[i].RoomToDate;
var enddate = todate +' '+totime;
var startdate = fromdate +' '+fromtime;
var startdate2 = response[i].StartDate +' '+fromtime;
var enddate2 = response[i].EndDate +' '+totime;
var nowdate;
var d = new Date();
nowdate = (d.getFullYear() + "-" + ('0' + (d.getMonth() + 1)).slice(-2)) + "-" + ('0' + d.getDate()).slice(-2) + " " + ('0' + d.getHours()).slice(-2) + ":" + ('0' + d.getMinutes()).slice(-2);
var tr_str = "<tr class='TableText'>" +
"<td style='color:#333;font-size:1em;padding-left:10px;font-weight: bold;vertical-align:middle;'>" + roomname + "</td>" +
"<td style='color:#333;font-size:0.7em;vertical-align:middle;'><img src='" + imagepath + "' /></td>" +
"<td style='color:#333;font-size:0.7em;min-height:80px;vertical-align:middle;'><img src='" + rowspacer + "' /></td>" +
"<td align='left' style='color:#333;font-size:1em;white-space: nowrap;;vertical-align:middle;'>" + clientname + "</td>" +
"<td align='left' style='color:#333;font-size:1em; white-space: nowrap;vertical-align:middle;'>" + fromdate + "</td>" +
"<td align='cleft' style='color:#333;font-size:1em;white-space: nowrap;vertical-align:middle;'>" + todate + "</td>"
if(new Date(enddate2) < new Date(nowdate)){
tr_str += "<td align='center' class='Complete'>Complete</td>";
} else if (new Date(startdate2) > new Date(nowdate) && new Date(nowdate) < new Date(enddate2)) {
tr_str += "<td align='center' class='Scheduled'>Scheduled</td>";
} else {
tr_str += "<td class='Active'>Active</td>";
}
tr_str += "<td align='center' style='color:#333;font-size:1em; margin-left:3px;margin-right:15px;vertical-align:middle;'><input type='button' name='edit' value='View' id=" + recordid + " class='btn btn-info btn-xs btn-block view_data_carousel'></td>" +
"</tr>";
$("#userTable tbody").append(tr_str);
}
}
});
$("#userTable").ajax.reload(); //THIS LINE DOES NOT SEEM TO DO USING reload or redrawANYTHING
});
});
在此先感谢您的帮助和时间。
答案 0 :(得分:0)
尝试!
flatMap(dangerousClass::doThis)