Issue with nested object with dropdown filter?

Issue with nested object with dropdown filter?

mercury15mercury15 Posts: 13Questions: 5Answers: 0
edited August 16 in Free community support

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

Answers

  • kthorngrenkthorngren Posts: 17,220Questions: 25Answers: 4,086

    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

  • mercury15mercury15 Posts: 13Questions: 5Answers: 0

    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.

  • kthorngrenkthorngren Posts: 17,220Questions: 25Answers: 4,086

    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

  • mercury15mercury15 Posts: 13Questions: 5Answers: 0
    edited August 19

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

  • colincolin Posts: 14,520Questions: 1Answers: 2,481

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

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

    Colin

  • mercury15mercury15 Posts: 13Questions: 5Answers: 0
    edited August 19

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

Sign In or Register to comment.