使用dataTables和Ajax

时间:2019-09-06 09:29:04

标签: jquery ajax datatables

我有一个使用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
      });
});

在此先感谢您的帮助和时间。

1 个答案:

答案 0 :(得分:0)

尝试!

flatMap(dangerousClass::doThis)