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 - 從選擇框發送發佈數據

回答

相關問題