main.js

(function ($) {
  $(document).ready(function () {
    var table = $('#example').DataTable({
      pageLength: 13, // or 14
      lengthChange: false,

      select: true, // enable select extension
      searching: true,
      dom: 'lrtip', // Remove default search elements
      // sorting: false,
      language: {
        info: '',
      },
      ajax: 'data.json',
      columns: [
        { data: 'supplier' },
        { data: 'dept' },
        { data: 'start_date' },
        { data: 'amount' },
      ],
      columnDefs: [
        { targets: [2], orderable: true },
        { targets: '_all', orderable: false },
        {
          targets: 0,
          render: function (data, type, row, meta) {
            // console.log(row);
            return (
              '<span class="arrow-icon"></span><span class="status ' +
              row.status +
              '"></span>' +
              row.supplier +
              '<span class="npo ' +
              row.non_profit_status +
              '">NPO</span>'
            );
          },
        },
      ],

      drawCallback: function (settings) {
        var api = this.api();
        var pageInfo = api.page.info();
        var info =
          'Showing ' +
          (pageInfo.start + 1) +
          ' to ' +
          pageInfo.end +
          ' of ' +
          pageInfo.recordsTotal +
          ' entries';
        if (api.search() && total > 0) {
          info += ' (filtered from ' + total + ' total entries)';
        }
        $('#searchResults').text(info);
      },
    });

    table.column(2).data().sort();

    $('#myTable_search').on('keyup', function () {
      table.search(this.value).draw();
    });

    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'tr', function () {
      var tr = $(this).closest('tr');
      var row = table.row(tr);

      if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
      } else {
        // Open this row
        row.child(format(row.data())).show();
        tr.addClass('shown');
      }
    });

    $('#filterSelect').on('change', function () {
      var selectedValue = $(this).val();
      if (selectedValue) {
        // Filter the table by the selected value
        $('#example').DataTable().column(1).search(selectedValue).draw();
      } else {
        // Remove any filters
        $('#example').DataTable().column(1).search('').draw();
      }
    });
  });
})(jQuery);
function format(data) {
  return `<div class="info-container ${data.status}">
            <p>${data.desc}</p>
            <p><span>Contract duration:</span> ${data.start_date}</p>
            <p><span>Contract title:</span> ${data.supplier}</p>
            <p><span>Contract type:</span> ${data.supplier}</p>
            <p><span>Contract number:</span> ${data.supplier}</p>
        </div>`;
}