Issue with nested object with dropdown filter?

mercury15

In nested object data, not getting text values in drop-down list for column filtering. It shows as [object object].

http://live.datatables.net/zimunuvo/4/edit

kthorngren

You will need to access the nested object for the value you want. Something like d.name. Like this:
http://live.datatables.net/zimunuvo/5/edit

This breaks the course column so you will need to add some logic to determine hot to access the object. Or use different table.columns([2, 3]).every(function () loops.

Kevin

mercury15

Thank you for the reply, but "Course" showed as "undefined" in the search options.
http: //live.datatables.net/zimunuvo/5/edit. If it is column index 2 set condition and same for index 3.

kthorngren

but "Course" showed as "undefined" in the search options.

That is what I said. You need to do some coding to handle the different data structures. You can add logic into the table.columns([2, 3]).every(function () loop. Or you can create separate loops for each data structure.

Kevin

mercury15

how to remove sorting from textbox in first column. using e.stopPropagation() in textbox click

colin

Looks like you have a sort(), so remove that and it won't sort:

column.data().unique().sort().each(function (d, j)

Colin

mercury15

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