Datatables ajax post - 从选择框发送发布数据

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

这是我到目前为止已经试过：
Datatables ajax post - 从选择框发送发布数据

<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>

EDIT:

它只能一次，并给出错误ReferenceError: Can't find variable: table上线，其中table.ajax.reload();
下一次，我选择另一个选项，数据表给出错误：Cannot reinitialise DataTable.

来源

2016-06-21 sohal07

在哪里的问题？您的帖子中没有真正的问题。 –

问题：这段代码不工作，需要帮助 – sohal07

什么部分？你必须更具体。据我所知，你的PHP脚本可能会失败。 –

尝试改变功能这样

$(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 
      }); 
    }); 
)};

来源

2016-06-22 11:46:50 Suyash

感谢您的建议，其工作正常，但我如何加载表访问页面。因为它只在选择更改后加载表格。 – sohal07

这是更改的代码。保持初始化代码原样。 – Suyash

是的，它现在可以工作......谢谢alott – sohal07

如果您在一个函数中定义了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(); 
    }); 
    });

来源

2016-06-21 08:36:19

仍然没有运气。可以肯定的是，它是张贴和表是重新加载选择更改，但由于某种原因，它始终张贴第一个'

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

来源

2016-06-22 11:29:56

Datatables ajax post - 从选择框发送发布数据

回答

相关问题