Isnull function and how to display the correct set of data through javascript to a html table

I have this set of javascript script on datatable:

<script>
  $(document).ready(function() {

    var table = $('#elogbooktable').DataTable( {
      "ajax": {url: "testing_getdetaildata.php", dataSrc: ""},
    'columnDefs': [ {
    'targets': 3,
            'createdCell': function(td, cellData, rowData, row, col) {
              if(rowData[4]) {
                  $(td).html(rowData[4]);
              }
            }
          } ],
          'filterDropDown': {                                       
                        columns: [
                            { 
                                idx: 5
                            }
                        ],
            bootstrap: true
                    },
         rowCallback: function(row, data, index){
            if(new Date(data[42]) < Date.now()){
            $(row).find('td:eq(42)').css('background-color', '#f8d7da');
          }
        },
    })
    <?php $i=13; 
     foreach($columns as $id=>$value) { 
         print "showHideColumn($id, $i);\n";
         $i++;
       } 
      ?>    

    //Add a text search box to each footer cell
    table.columns().every( function () {
      $(this.footer()).html("<input type='text' style='width:100%;' placeholder='Search'/>");
    });
    
    //Full table search functionality
    // Column search function       
    table.columns().every( function () {
      var that = this;
      $( 'input', this.footer() ).on( 'keyup change', function () {
        if ( that.search() !== this.value ) {
          that.search( this.value, true ).draw();
        }
      });
    });
    
    var buttons = new $.fn.dataTable.Buttons(table, {
     'buttons': ['pageLength','copyHtml5',
            {
              extend: 'excelHtml5',
            },
            {
              extend:  'print',
            }]
    }).container().appendTo($('#envdetail_wrapper .col-sm-6:eq(0)'));
    
    setInterval( function () {
      table.ajax.reload();
    }, 300000 );
  
  });



  function showHideColumn(id, number) {
    var dtable = $('#elogbooktable').DataTable();
    
    if(dtable.column(number).visible() === true) {
      if($(id).attr("class").includes("btn-primary")) {
          $(id).removeClass("btn-primary");
          $(id).addClass("btn-default");
        }
        dtable.column(number).visible(false);
    }
    else {
      if($(id).attr("class").includes("btn-default")) {
          $(id).removeClass("btn-default");
          $(id).addClass("btn-primary");
        }
        dtable.column(number).visible(true);
    }
  }

 </script>

The MySQL query is like this from testing_getdetaildata.php:

select *, ifnull(Board_ID,'') as Board_ID1 from Lab_WIP_History a LEFT join chamber_data b ON 
a.LOT_LOCATION = b.Testtag  LEFT JOIN chamber_data_1 c
ON a.LOTID = c.lotid;

And the query table is like this:

LOT_LOCATION, Zone, LOT_ID, DESIGN_ID, BOARD_ID, BOARD_ID1
SGBAKE.0012, '',    CVN4BL2.11, NM112, NULL, ''

In the webpage, esp for

'targets': 3,
'createdCell': function(td, cellData, rowData, row, col) {
      if(rowData[4]) {
      $(td).html(rowData[4])

, the printed result in the webpage is like this:

LOT_LOCATION, Zone, LOT_ID, BOARD_ID
SGBAKE.0012, '',    CVN4BL2.11, NM112

Which is not what i want since I want the Board_ID value in the table displayed to be replaced by BOARD_ID1. So, what I want is like this:

LOT_LOCATION, Zone, LOT_ID, BOARD_ID
SGBAKE.0012, '',    CVN4BL2.11, ''

Does anyone know how to solve this table display issue? Any help is appreciated thank you!