Answers

• colin Posts: 15,177Questions: 1Answers: 2,590

  May 2022

  Ideally you'd want to add a second header row - please see this example from this thread.

  If you want a single row, this example from this thread is demonstrating how to do that,

  Colin
• edwinkoh Posts: 7Questions: 2Answers: 0

  May 2022

  that was quick Colin, thanks for the swift response. let me try the 2nd sample. the first does not work for me as we didnt want the extra row.
  best,
  edwin
• edwinkoh Posts: 7Questions: 2Answers: 0

  May 2022

  Hi Colin,
  thanks for the code, its different than what i normally see in the samples and gives me a lot to explore.
  the requirements i have includes the use of a select box beneath the header. i modified your code to add SELECTs instead of inputs and right away i noticed that yor original INPUT element does not trigger a sort. however, when i replaced it with a select - sorting is still triggered - im back to where i started.
  i thought that the stop propagation would help but i added that into my select trigger but it didnt help.
  is there some limitation im hitting? or a setting im missing?

  thanks,
  edwin

  heres the new version where i just started building the select (havent gotten to populating the contents of the select but my issue persists - unwanted sorting). sorting is triggered when i click one of the SELECT options.

  https://jsfiddle.net/koh_edwin/5cs1oku0/3/
• colin Posts: 15,177Questions: 1Answers: 2,590

  May 2022

  You can do something like this - it's mixing my previous example with this one.

  Hope that does the trick,

  Colin
• honusbam Posts: 1Questions: 0Answers: 0

  May 15

  This thread was helpful to me in solving my use case. I wanted to include my code here in case it helps someone else in the future.

  In my case, I wanted to add the textboxes in the second row. I am using the API(), so some of the provided examples didn't exactly solve this for me. This code also shows how I disabled sorting on the second row AND how I handled when sorting does happen on the DT.

         dt.api()
              .columns()
              .every(function () {
                  let column = this;
                  let title = column.header(1).textContent;
  
                  // Create input element
                  let input = document.createElement('input');
                  input.placeholder = title;
  
                  input.className = 'form-control form-control-sm w100';
                  input.style.fontSize = '12px';
  
                  column.header(1).classList = "";
                  column.header(1).removeAttribute("aria-sort");
                  column.header(1).removeAttribute("aria-label");
                  column.header(1).replaceChildren(input);
  
                  //handle the click event on the column header
                  $(column.header(1)).click(function (e) {
                      e.stopPropagation();
                  });
  
                  //handle the focus event of the cell and just put focus on the input
                  $(column.header(1)).focus(function () {
                      input.focus();
                  });
  
                  // Event listener for user input
                  input.addEventListener('keyup', () => {
                      if (column.search() !== this.value) {
                          column.search(input.value).draw();
                      }
                  });
              });
  
  
          dt.on('order.dt search.dt', function () {
              dt.api().columns().every(function () {
                  this.header(1).classList = "";
                  this.header(1).removeAttribute("aria-sort");
                  this.header(1).removeAttribute("aria-label");
              });
          });