I have a datatable where data is coming from Backend. Data is coming based on FromDate to ToDate and in table we can sort data.But when there is no data between FromDate to ToDate than i am displaying "No data found in my table" but when i click on sorting icon on head of table because table is not refreshing itself.
var inittable = function() {
var finance = $('#financetbl');
var ofinance = finance.dataTable({
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No data available in table",
"zeroRecords": "No matching records found"
},
buttons: [{
extend: 'print',
className: 'btn dark btn-outline'
}, {
extend: 'excel',
className: 'btn yellow btn-outline '
}],
responsive: false,
//"ordering": false, disable column ordering
//"paging": false, disable pagination
colReorder: {
reorderCallback: function () {
console.log( 'callback' );
}
},
"order": [
[0, 'asc']
],
"lengthMenu": [
[5, 10, 15, 20, -1],
[5, 10, 15, 20, "All"] // change per page values here
],
// set the initial value
"pageLength":10,
"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
});
}jquery and Ajax code for table :-
$('#paymentdetails').click(function(){
if( $(".datepickerInputFROM").val() > $(".datepickerInputTO").val())
{
alertify.alert('From Date should not be greater than To Date')
return false;
$(".datepickerInputFROM").val ="";
}
var getData = basePath +'AdminFinance/GetStudentPaymentsForDate/?FromDate='+$(".datepickerInputFROM").val() + '&ToDate='+$(".datepickerInputTO").val()
if (($(".datepickerInputFROM").val() == "") && ($(".datepickerInputTO").val() == ""))
{
alertify.alert('Please select dates to proceed.')
return false;
} else if (($(".datepickerInputFROM").val() == "") || ($(".datepickerInputTO").val() == ""))
{
alertify.alert('Please select dates to proceed.')
return false;
}
$.ajax({
url: getData
, async: false
, success: function (response) {
// alert(response[0]);
//$('#financetbl tbody').empty();
$('#financetbl tbody').empty();
// if (response.resultCourse != '' && response[0]!= 'null') {
if (response.length > 0) {
var tr;
for (var i = 0; i < response.length; i++) {
tr = '<tr>'
tr += "<td>" + response[i].transactionDate+ "</td>";
tr += "<td>" + response[i].applicationNumber+ "</td>";
tr += "<td>" + response[i].applicantName+ "</td>"
tr += '</tr>'
$('#financetbl tbody').append(tr);
}
inittable();
console.log(response)
}
else {
console.log(response)
alertify.alert("Error : No Payments Details Found");
inittable();
}
}
});
});I have tried with below option but nothing is working for me.
`$("#tbodyID tr").detach();
$("#tbodyID tr").remove();
$("#tbodyID").empty();
$("#tbodyID").html("");
$("tbody").empty();
$("tbody").html("");
$('#table').dataTable().fnDraw(false)`You wanna de-initialize the table data when there is no data? Then try this?
// destroy first
$('#yourTableId').dataTable().fnDestroy();
// then initialize table again
$('#yourTableId').dataTable({ ... });
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments