Why is my search not working for my first column?

BradleyO07

Below is how my table is put together

var mainDT;
/**
 * Generates Main DataTables
 */
function getTable(){
  //Initialize Main DataTable
  mainDT = $('#mainTable').DataTable( {
    display: 'enevlope',
    ajax: {
      'type': 'POST',
      'url': './ajax/getData.ajax.php',
      'data': {
        'getTable': 1,
      }
    },
    table: ('#mainTable'),
    orderCellsTop: true,
    searching: true,
    paging: true,
    iDisplayLength: 10,
    bInfo: true,
    scrollX: true,
    dom:
      "<'row'<'col-12 col-sm-6 col-md-4 col-lg-3'l><'col-md-4 col-lg-6 d-none d-md-block'><'col-12 col-sm-6 col-md-4 col-lg-3'f>>" +
      "<'row'<'col-sm-12'tr>>" +
      "<'row'<'col-sm-5'i><'col-sm-7'p>>",
    columns: [
      { data: null, render: function( data, type, row ){
        return "<a class=\" default-link\" onClick=\"viewEmployee(" + data.uid + ")\">" + data.card_name;
      }},
      { data: null, render: function( data, type, row ){
        if (data.attendance == 1){
          return "Y";
        } else {
          return "N";
        }
      }},
      { data: null, render: function( data, type, row ){
        if (data.batchweight == 1){
          return "Y";
        } else {
          return "N";
        }
      }},
      { data: null, render: function( data, type, row ){
        if (data.brkroomkiosk == 1){
          return "Y";
        } else {
          return "N";
        }
      }},
      { data: null, render: function( data, type, row ){
        if (data.capex_ro == 1){
          return "Y";
        } else {
          return "N";
        }
      }},
      { data: null, render: function( data, type, row ){
        if (data.capex_rw == 1){
          return "Y";
        } else {
          return "N";
        }
      }},
      { data: null, render: function( data, type, row ){
        if (data.labelmanage == 1){
          return "Y";
        } else {
          return "N";
        }
      }},
      { data: null, render: function( data, type, row ){
        if (data.mixercountdn == 1){
          return "Y";
        } else {
          return "N";
        }
      }},
      { data: null, render: function( data, type, row ){
        if (data.oraclecomp == 1){
          return "Y";
        } else {
          return "N";
        }
      }},
      { data: null, render: function( data, type, row ){
        if (data.personnel_m == 1){
          return "Y";
        } else {
          return "N";
        }
      }},
      { data: null, render: function( data, type, row ){
        if (data.personnel_ro == 1){
          return "Y";
        } else {
          return "N";
        }
      }},
      { data: null, render: function( data, type, row ){
        if (data.personnel_rw == 1){
          return "Y";
        } else {
          return "N";
        }
      }},
      { data: null, render: function( data, type, row ){
        if (data.phoneupdate == 1){
          return "Y";
        } else {
          return "N";
        }
      }},
      { data: null, render: function( data, type, row ){
        if (data.pressparam == 1){
          return "Y";
        } else {
          return "N";
        }
      }},
      { data: null, render: function( data, type, row ){
        if (data.projskedro == 1){
          return "Y";
        } else {
          return "N";
        }
      }},
      { data: null, render: function( data, type, row ){
        if (data.projskedrw == 1){
          return "Y";
        } else {
          return "N";
        }
      }},
      { data: null, render: function( data, type, row ){
        if (data.recipe == 1){
          return "Y";
        } else {
          return "N";
        }
      }},
      { data: null, render: function( data, type, row ){
        if (data.safety == 1){
          return "Y";
        } else {
          return "N";
        }
      }},
      { data: null, render: function( data, type, row ){
        if (data.safetymgr == 1){
          return "Y";
        } else {
          return "N";
        }
      }},
      { data: null, render: function( data, type, row ){
        if (data.schedkiosk == 1){
          return "Y";
        } else {
          return "N";
        }
      }},
      { data: null, render: function( data, type, row ){
        if (data.siginstruct == 1){
          return "Y";
        } else {
          return "N";
        }
      }},
      { data: null, render: function( data, type, row ){
        if (data.super == 1){
          return "Y";
        } else {
          return "N";
        }
      }},
      { data: null, render: function( data, type, row ){
        if (data.txtalert == 1){
          return "Y";
        } else {
          return "N";
        }
      }},
      { data: null, render: function( data, type, row ){
        if (data.uploadoff == 1){
          return "Y";
        } else {
          return "N";
        }
      }},
      { data: null, render: function( data, type, row ){
        if (data.webprod == 1){
          return "Y";
        } else {
          return "N";
        }
      }},
    ],
    fixedColumns: {
      leftColumns: 1
    },
    initComplete: function(){
      //This draws the option for the table for static row
      this.api().columns([0]).every( function () {
        var column = this;
      
        var select = $('<input type="text" class="fixed_col" placeholder="Search" />')
            .appendTo($(column.header()).parent().parent().children('tr').eq(1).children('th').eq(0).empty() )
            .on( 'keyup change clear', function () {
                var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val()
                );
      
                column
                    .search( this.value )
                    .draw();
            } );
          } );
      //This Draws The Option For The Table
      this.api().columns([]).every(function(index){
        var column = this;
        var select = $('<select><option value=""></option></select>')
          .appendTo($(column.header()).parent().children('tr').eq(1).children('th').eq(index).empty() )
          .on( 'keyup change clear', function(){
            var val = $.fn.dataTable.util.escapeRegex(
              $(this).val()
            );
            column
              .search( this.value )
              .draw();
          });
      });
      //This Draws The Option For The Table
      this.api().columns([]).every(function(index) {
        var column = this;
        var width = "100%";
        if(index == 1){
          width = "600px";
        }
        var select = $('<input type="text" style="width:' + width + '"placeholder="Search"/>')
          .appendTo($(column.header()).parent().parent().children('tr').eq(1).children('th').eq(index).empty() )
          .on( 'keyup change clear', function(){
            var val = $.fn.dataTable.util.escapeRegex(
              $(this).val()
            );
            column
              .search( this.value )
              .draw();
          });
      });
    }
  });
  mainDT.buttons().container()
    .appendTo( '#mainTable_wrapper .col-md-6:eq(0)' );
  $( mainDT.table().container() ).on ( 'keyup change clear', 'fixed_col', function(){
    mainDT
      .mainDT( $(this).data('index') )
      .search( this.value )
      .draw();
  });
  //Wait Half A Second For The Table To Finish And Align Columns
  setTimeout(fixColumns, 500, mainDT);
}

At line 205 is where I begin to configure the search function for my table. I have it configured the same way in multiple other applications and it works fine. Was wondering why is won't work here? Do I have an error within my code that I can't see? Or what could be a potential probably?

kthorngren

I copied your code for the first column into this test case and it seems to work.
https://live.datatables.net/saqozowe/2482/edit

Can you post a link to your page or a test case that replicates the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kthorngren

I took another look. For the first column you have this:

      { data: null, render: function( data, type, row ){
        return "<a class=\" default-link\" onClick=\"viewEmployee(" + data.uid + ")\">" + data.card_name;
      }},

You might need to extract the data you want to search by using orthogonal data to set the search and if desired the sort operations to the value you want. Maybe the data.card_name value?

Kevin