Why is my search not working for my first column?

Why is my search not working for my first column?

BradleyO07BradleyO07 Posts: 14Questions: 11Answers: 0
edited March 5 in Free community support

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?

Answers

Sign In or Register to comment.