sohal07 sohal07 - 5 months ago 61
Ajax Question

Datatables ajax post - send post data from select box



I have a datatable which gets the data from json.php file. It is working fine, but now I want a selectbox with various options (eg: 'This Year, Last Year, Open Bills, Closed Bills, Overdue etc), which on select send ajax post variables

data: {cmd: ($('#selected').val()}
to json.php (which will refine the requested records) and
ajax.table.reload();
so that new records gets displayed.


This is what I have tried so far:


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


It works only once and gives error
ReferenceError: Can't find variable: table
on line where
table.ajax.reload();


Next time I select another option, datatables give error:
Cannot reinitialise DataTable.

Answer

Try change function like this

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