Answers

• kthorngren Posts: 21,342Questions: 26Answers: 4,954

  August 2022

  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 Posts: 14Questions: 6Answers: 0

  August 2022

  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 Posts: 21,342Questions: 26Answers: 4,954

  August 2022

  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 Posts: 14Questions: 6Answers: 0

  August 2022 edited August 2022

  how to remove sorting from textbox in first column. using e.stopPropagation() in textbox click
• colin Posts: 15,240Questions: 1Answers: 2,599

  August 2022

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

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

  Colin
• mercury15 Posts: 14Questions: 6Answers: 0

  August 2022 edited August 2022

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