Datatables ajax post - 从选择框中发送帖子数据

Question

我有一个从 json.php 文件中获取数据的数据表。它工作正常，但现在我想要一个带有各种选项的选择框（例如：'今年、去年、未结账单、已结账单、逾期等），在选择时将 ajax 发布变量data: {cmd: ($('#selected').val()} 发送到 json.php（其中将细化请求的记录）和ajax.table.reload();，以便显示新记录。

这是我迄今为止尝试过的：

<select class="form-control" name="selection" id="selection">
  <option value="thisMon">This Month</option>
  <option value="lasMon">Last Month</option>
  <option value="thisYr">This Year</option>
  <option value="lasYr">Last Year</option>
  <option value="open">Open</option>
  <option value="closed">Closed</option>
</select>

 <script>
  $(document).ready(function() {
    $('#selection').change(function() {
      var table = $('#datatable-buttons').DataTable({
        "ajax": {
            url: "scripts/json-expenses.php",
            dataSrc: "",
            data: { length: $('#selection').val() }
        },
        dom: "Bfrip",
        "columns": [
          { data: "id", visible: false, searchable: false },
          { data: "expense_date"},
          { data: "supplier",
            render: function(data, type, row){
              return '<a href="/numbers/edit-expense.php?id='+ row.id +'">'+ data +'</a>'; 
            }
          },
          { data: "amount" },
          { data: "gst" }, 
          { data: "status",
            render: function(data, type, row) {
              if (row.due_date !== null) {
                var dueDateArr = row.due_date.split("-");
                var dueDate = new Date(dueDateArr[0], dueDateArr[1]-1, dueDateArr[2]);
                var todayDate = new Date();
              }

              if (data == "Not Paid" && todayDate > dueDate) {
               return '<label class="label label-danger">Overdue</label>';
              }

              if (data === "Paid") {
                return '<label class="label label-success">'+ data +'</label>';
              }
              else if (data === "Not Paid") {
                return '<label class="label label-default">'+ data +'</label>';
              }
            }
          },
          { data: "due_date",
            defaultContent: ""
          }
        ],
        "order": [ 1, 'desc' ],
        paging: false,
        fixedHeader: true
      });
    });
    $('#selection').change(function(){
      table.ajax.reload();
    });
  });
</script>

编辑：

它只工作一次，并在table.ajax.reload();ReferenceError: Can't find variable: table 的行上给出错误
下次我选择另一个选项时，数据表会报错：Cannot reinitialise DataTable.

Answer 1

试试这样的改变功能

$(document).ready(function(){
    $('#datatable-buttons').DataTable({
            "ajax": {
                url: "scripts/json-expenses.php",
                dataSrc: "",
                data: { length: $('#selection').val() }
            },
            dom: "Bfrip",
            "columns": [
              { data: "id", visible: false, searchable: false },
              { data: "expense_date"},
              { data: "supplier",
                render: function(data, type, row){
                  return '<a href="/numbers/edit-expense.php?id='+ row.id +'">'+ data +'</a>'; 
                }
              },
              { data: "amount" },
              { data: "gst" }, 
              { data: "status",
                render: function(data, type, row) {
                  if (row.due_date !== null) {
                    var dueDateArr = row.due_date.split("-");
                    var dueDate = new Date(dueDateArr[0], dueDateArr[1]-1, dueDateArr[2]);
                    var todayDate = new Date();
                  }

                  if (data == "Not Paid" && todayDate > dueDate) {
                   return '<label class="label label-danger">Overdue</label>';
                  }

                  if (data === "Paid") {
                    return '<label class="label label-success">'+ data +'</label>';
                  }
                  else if (data === "Not Paid") {
                    return '<label class="label label-default">'+ data +'</label>';
                  }
                }
              },
              { data: "due_date",
                defaultContent: ""
              }
            ],
            "order": [ 1, 'desc' ],
            paging: false,
            fixedHeader: true
          });
    $('#selection').change(function(){
    $('#datatable-buttons').dataTable().fnDestroy();
    var table = $('#datatable-buttons').DataTable({
            "ajax": {
                url: "scripts/json-expenses.php",
                dataSrc: "",
                data: { length: $('#selection').val() }
            },
            dom: "Bfrip",
            "columns": [
              { data: "id", visible: false, searchable: false },
              { data: "expense_date"},
              { data: "supplier",
                render: function(data, type, row){
                  return '<a href="/numbers/edit-expense.php?id='+ row.id +'">'+ data +'</a>'; 
                }
              },
              { data: "amount" },
              { data: "gst" }, 
              { data: "status",
                render: function(data, type, row) {
                  if (row.due_date !== null) {
                    var dueDateArr = row.due_date.split("-");
                    var dueDate = new Date(dueDateArr[0], dueDateArr[1]-1, dueDateArr[2]);
                    var todayDate = new Date();
                  }

                  if (data == "Not Paid" && todayDate > dueDate) {
                   return '<label class="label label-danger">Overdue</label>';
                  }

                  if (data === "Paid") {
                    return '<label class="label label-success">'+ data +'</label>';
                  }
                  else if (data === "Not Paid") {
                    return '<label class="label label-default">'+ data +'</label>';
                  }
                }
              },
              { data: "due_date",
                defaultContent: ""
              }
            ],
            "order": [ 1, 'desc' ],
            paging: false,
            fixedHeader: true
          });
    });
)};

Answer 2

在你的数据表中设置"destroy": true

Answer 3

如果您在函数中定义table，它将仅在函数和子函数中定义。

在您的代码中，您在$('#selection').change(function() { 中定义了table，并且您将在另一个$('#selection').change(function() { 中使用它，因此它不会在第二个函数中定义。

而且还有一个错误，因为你使用了两次$('#selection').change(function() {，并尝试多次添加数据表。

$(document).ready(function() {
     //no need for change, just load table on document ready
      var table = $('#datatable-buttons').DataTable({
        "ajax": {
            url: "scripts/json-expenses.php",
            dataSrc: "",
            data: { length: $('#selection').val() }
        },
        dom: "Bfrip",
        "columns": [
          { data: "id", visible: false, searchable: false },
          { data: "expense_date"},
          { data: "supplier",
            render: function(data, type, row){
              return '<a href="/numbers/edit-expense.php?id='+ row.id +'">'+ data +'</a>'; 
            }
          },
          { data: "amount" },
          { data: "gst" }, 
          { data: "status",
            render: function(data, type, row) {
              if (row.due_date !== null) {
                var dueDateArr = row.due_date.split("-");
                var dueDate = new Date(dueDateArr[0], dueDateArr[1]-1, dueDateArr[2]);
                var todayDate = new Date();
              }

              if (data == "Not Paid" && todayDate > dueDate) {
               return '<label class="label label-danger">Overdue</label>';
              }

              if (data === "Paid") {
                return '<label class="label label-success">'+ data +'</label>';
              }
              else if (data === "Not Paid") {
                return '<label class="label label-default">'+ data +'</label>';
              }
            }
          },
          { data: "due_date",
            defaultContent: ""
          }
        ],
        "order": [ 1, 'desc' ],
        paging: false,
        fixedHeader: true
      });
    //on change reload table
    $('#selection').change(function(){
      table.ajax.reload();
    });
  });