19th Aug 2022Issue with nested object with dropdown filter?
$(document).ready(function () {
var table = $('#tblApplicants').DataTable({
//bSort: false,
serverSide: false,
ajax: {
url: '?handler=Applicant',
timeout: 60000,
dataSrc: '',
},
columns: [
{ title: 'Registration No', data: 'registrationNo', width: '5%', orderable: true },
{ title: 'Name', data: 'registration.fullName', width: '25%', orderable: false },
{ title: 'Course', data: 'courseGroup.courseGroup.title', width: '30%'},
{
title: 'Study Centre',
width: '30%',
orderable: false,
data: 'courseGroup.studyCentre',
render: function (data) {
return data.code + '-' + data.name + '-' + data.city;
}
},
{
title: 'Date Of Birth',
data: 'dateOfBirth',
width: '5%',
orderable: false,
render: function (data) {
var date = new Date(data);
var day = (("0" + date.getDate()).slice(-2))
var vmonth = date.getMonth();
var year = date.getFullYear();
var date1 = new Date(year, vmonth, day);
var month = date1.toLocaleString('en-us', { month: 'short' });
var ADate = day + "-" + month + "-" + year;
return ADate;
}
},
{ title: 'Mobile No', data: 'registration.mobileNo', width: '5%', orderable: false },
{
data: null,
sortable: false,
searchable: false,
targets: -1,
render: function (data, type, full, meta) {
return '<a href="/ApplicantViewDetails?regno=' + full.registrationNo + '" class="btn btn-icon text-dark btn-sm" title="View"><i class="fa fa-eye"></i></a>'
+ '<a href="/ApplicantEditDetails?regno=' + full.registrationNo + '" class="btn btn-icon btn-sm" title="Edit"><i class="fa fa-edit"></i></a>'
}
}
]
});
$('#tblApplicants thead tr')
.clone(false)
.addClass('filters')
.prependTo('#tblApplicants thead');
table.columns(2).every(function () {
var column = this;
var select = $('<select><option value="">Select</option></select>')
.appendTo($('thead tr.filters th').eq(column.index()).empty())
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>');
});
});
table.columns(3).every(function () {
var column = this;
var select = $('<select><option value="">Select</option></select>')
.appendTo($('thead tr.filters th').eq(column.index()).empty())
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d.studyCentre + '">' + d.code + '-' + d.name + '-' + d.city + '</option>');
console.log(d);
});
});
table.columns([0, 1, 4, 5]).every(function () {
var that = this;
var input = $('<input type="text" placeholder="Search" />')
.appendTo($('thead tr.filters th').eq(that.index()).empty())
.on('keyup change', function () {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
$('#tblApplicants thead th:eq(6)').empty();
});
http://live.datatables.net/zimunuvo/5/edit (demo link)
For a demo drop-down list showing values, but in testing in the server (vs. code testing) not showing values when I check using alert msg it shows null value. Pls help me out.Data not binding to dropdownlist