create dynamic datatable in jQuery

Question

I am trying to create the datatable thead time accordingly, but I am having trouble when saving the day shift, changing from AM-PM OR PM-AM. I want when the condition is D it means it's the day shift and the thead should start from 9AM-9PM; when the condition is N it means it's night shift and the thead should start from 9PM-9AM.

<table class="table" id="mytable">
  <thead>
    <tr></tr>
  </thead>
</table>

 function load_table(status) {
   $("table#mytable thead tr").empty();
   let initTime = 0 - 3;
   let startTime = 9;
   if (status == "D") {
     for (var i = 0; i < 13; i++) {
       $("table#mytable thead tr").append(`
        <th>${startTime} - ${startTime+1 <= 12 ? startTime+1 +"AM"  : initTime+"PM"} </th>
       `);
       startTime++, initTime++;
     }
   } else {
     for (var i = 0; i < 13; i++) {
       $("table#mytable thead tr").append(`
       <th>${startTime} - ${startTime+1 <= 12 ? startTime+1 +"PM"  : initTime+"AM"} </th>
       `);
       startTime++;
     }
   }
 }
 load_table("N");
 // D =  DAY & N = Night
 // Day = 9AM - 9PM
 // Night = 9PM - 9AM

Why not change where the loops start depending on whether status is "D" or "N"? startTime is always 9, so start the night shift with i = 12. You'll need to add code that resets startTime to 0 at midnight. I'm not sure what initTime is supposed to be, starting at -3... — Heretic Monkey
– Heretic Monkey, Commented Mar 25, 2023 at 1:55

76484 · Accepted Answer · 2023-03-25 01:55:42Z

I think this problem will be made much easier if you separate the logic of formatting the shifts from the code that constructs the HTML. One advantage of this is that it will make testing the shift construction (the hard part) easier because it will return an array that we can view in the console.

I would also initially create each hour according to the 24-hour clock in order to make the AM/PM logic easy. I would convert the hour to the 12-hour clock only when formatting it for presentation. We can put the formatting logic into its own function.

The code becomes:

const formatHour = hour => {
  const suffix = (hour % 24) >= 12 ? 'PM' : 'AM';
  const formattedHour = hour % 12 || 12;
  
  return `${formattedHour}${suffix}`;
}
 
const getHours = status => {
  const startHour = status === 'D' ? 9 : 21;

  return (new Array(12)).fill(0).map((_, i) => {
    const start = (startHour + i) % 24;
    const end = (start + 1);
      
    return `${formatHour(start)} - ${formatHour(end)}`;
  });
}

const mapHoursToHtml = hours => hours.map(hour => {
  return `<th>${hour}</th>`;
}).join('');

$("#mytableD thead tr").append(mapHoursToHtml(getHours('D')));
$("#mytableN thead tr").append(mapHoursToHtml(getHours('N')));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="mytableD">
  <thead>
    <tr></tr>
  </thead>
</table>

<table class="table" id="mytableN">
  <thead>
    <tr></tr>
  </thead>
</table>

Collectives™ on Stack Overflow

create dynamic datatable in jQuery

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related