Ajax DataTable 数据没有改变

Question

我有一个 DataTable ajax 将值传递给控制器。请参阅下面的代码片段以获取我的简化代码。

$(function() {
  $("#tableDiv").hide();
  $("#submitDateFilters").on("click", function() {
    displayData();
    $("#tableDiv").show();
    document.getElementById("dateFilters").reset();
  });

});

////////////////////
// Table Header Contents
////////////////////
var tblReport = {};
var table;
var tableCont = {
  "db_columns": [
    "TYPE", "USER_ID", "USER_NAME", "DATE_ACCESS", "SESSION_ID", "PROJECT"
  ]
};
var obj = new Object();
////////////////////
// Create Table
////////////////////
function createTbl(wrapper) {
  wrapper.empty();
  wrapper.append(
    $("<table/>").append($("<thead/>"), $("<tfoot/>"))
  );
  // row header
  var row = $("<tr/>");
  $.each(tableCont["db_columns"], function(i, val) {
    row.append($("<th/>").text(val.replace(/\_/g, " ")));
  });
  $("table", wrapper).find("thead, tfoot").append(row);
  return $("table", wrapper);
}

////////////////////
// Initialize Datatables
////////////////////
function displayData() {
  var wrapper = $(".tbl-wrapper");

  var dataObj = new Object();
  dataObj.cols = tableCont["db_columns"];

  var sDate = $("#startDate").val();
  var eDate = $("#endDate").val();

  if ($.isEmptyObject(tblReport)) {
    //** create table
    tblReport = createTbl(wrapper);

    //** assign datatable columns
    var columns = [];
    $.each(tableCont["db_columns"], function(k, val) {
      columns.push({
        "data": val
      });
    });

    //** initialize datatable
    table = tblReport.DataTable({
      "order": [
        [3, "desc"]
      ],
      "lengthMenu": [
        [20, 50, 100, 200],
        [20, 50, 100, 200]
      ],
      "serverSide": true,
      "processing": true,
      "deferRender": true,
      "destroy": true,
      "ajax": {
        "url": "getTableData",
        "type": "POST",
        "data": {
          jsonData: JSON.stringify(dataObj),
          startDate: sDate,
          endDate: eDate
        },
        "cache": false
      },
      "columns": columns,
      "columnDefs": [{
        "data": undefined,
        "defaultContent": "",
        "targets": "_all"
      }],
      "drawCallback": function() {
        //** re-adjust filters WIDTH
      },
      "initComplete": function() {
        //** initialize COLUMN FILTERS
      }
    });

    //** reload page on DATATABLE ERROR
    $.fn.dataTable.ext.errMode = function(error) {
      alert(error.toString());
      //window.location.reload(true);
    };

  } else {
    table.ajax.reload();
  }
}

$("#startDate").datepicker({
  maxDate: '0',
  constrainInput: true,
  changeYear: true,
  changeMonth: true,
  showOtherMonths: true,
  selectOtherMonths: true,
  onSelect: function(selectedDate) {
    $("#endDate").datepicker("option", "minDate", selectedDate);
  }
});

$("#endDate").datepicker({
  maxDate: '0',
  constrainInput: true,
  changeYear: true,
  changeMonth: true,
  showOtherMonths: true,
  selectOtherMonths: true,
  onSelect: function(selectedDate) {
    $("#startDate").datepicker("option", "maxDate", selectedDate);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.11/jquery.min.js"></script>
<div class="report-wrapper" align="center">
  <div style="margin-bottom:5px;" align="center">
    <form method="POST" action="getTableData" enctype="multipart/form-data" id="dateFilters">
      <table>
        <tr>
          <td class="txt-bold"> FILTER DATE FROM: </td>
          <td><input type="text" name="startDate" id="startDate" /></td>
          <td class="txt-bold"> TO: </td>
          <td style="padding-left:5px;"><input type="text" name="endDate" id="endDate" /></td>
          <td><button type="button" id="submitDateFilters">Search</button></td>
        </tr>
      </table>
    </form>
  </div>
  <div class="datatbl" style="width:1115px;" id="tableDiv"></div>
</div>

单击“搜索”按钮后，将调用函数 displayData()，并且 ajax 调用将发送一个请求。这对于第一次调用工作正常，但在接下来的按钮点击中，ajax 发送第一次调用的 startDate 和 endDate 值。

ajax/my 代码有什么问题，我该如何解决？

编辑： 我刚刚发现这是由我的脚本的 ajax.reload() 不工作引起的。我已将 DataTable 代码添加到代码段中。

Answer 1

ajax.data 选项使用函数而不是对象。并在调用函数时从 startDate 和 endDate 控件中检索数据。

如果您将对象用于 ajax.data 选项，您的代码将仅在初始化时被评估一次。如果您为 ajax.data 选项使用函数，则每次加载或重新加载 table 时都会调用它。

例如：

"ajax": {
  "url": "getTableData",
  "type": "POST",
  "data": function ( d ) {
    d.jsonData = JSON.stringify(dataObj);
    d.startDate = $("#startDate").val();
    d.endDate = $("#endDate").val();
  }
},

Ajax DataTable 数据没有改变

Ajax DataTable data not changing

javascript

ajax

jquery

datatables

datatables-1.10