Answers

• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  October 19

  Put the input elements into a second row in the table header and use orderCellsTop to tell DataTables to apply ordering to the top cells only.

  The other option is to add e.stopPropagation() in your event handler to stop the event bubbling up (add e to the event handler function's parameters).

  Allan
• castillocaleb Posts: 4Questions: 1Answers: 0

  October 19

  Hi allan, I was able to stop the order by using e.stopPropagation()

  But I am curious how to implement your first option. Put the input Tag element into the second row in the table header? How does that looks like? Something like this?

  Then use the orderCellsTop to use the first tr's from the thead?

  <table id="example" class="display" style="width:100%">
      <thead>
          <tr>
              <th>Name</th>
              <th>Position</th>
              <th>Office</th>
              <th>Age</th>
              <th>Start date</th>
              <th>Salary</th>
          </tr>
          <tr>
              <input type="text" name="Name">
              <input type="text" name="Position">
              <input type="text" name="Office">
              <input type="text" name="Age">
              <input type="text" name="Start">
              <input type="text" name="Salary">
          </tr>
      </thead>
  

  JavaScript that worked with e.stopPropagation() here

  <script>
      new DataTable('#example', {
          initComplete: function () {
              this.api()
                  .columns()
                  .every(function () {
                      let column = this;
                      let title = column.footer().textContent;
  
                      // Create input element
                      let input = document.createElement('input');
                      input.placeholder = title;
                      column.footer().replaceChildren(input);
  
                      var r = $('#example tfoot tr');
                      r.find('th').each(function () {
                         this.addEventListener('click', (e) => {
                              e.stopPropagation();
                         });
  
                         $(this).css('padding', 8);
                      });
  
                      $('#example thead').append(r);
                      $('#search_0').css('text-align', 'center');
  
                      // Event listener for user input
                      input.addEventListener('click', (e) => {
                          e.stopPropagation();
                      });
  
                      // Event listener for user input
                      input.addEventListener('keyup', (e) => {
                          e.stopPropagation();
                          if (column.search() !== this.value) {
                              column.search(input.value).draw();
                          }
                      });
                  });
          }
      });
  
• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  October 19 Answer ✓

  Here is an example of search inputs in the second header row:
  https://live.datatables.net/giharaka/1/edit

  Kevin
• castillocaleb Posts: 4Questions: 1Answers: 0

  November 5 edited November 5

  Hi kthorngren, This does not work with serverside processing.

  Also, I noticed when I hit enter on the input text it will sort on the column. How do I stop it from sort when pressing the enter key on the input text?

  I already have a stopPropagation like so.

              input.addEventListener('click', (ev) => {
                  ev.stopPropagation();
              });
  
              input.addEventListener('keyup', function (ev) {
                  ev.stopPropagation();
              });
  
              input.addEventListener('keydown', function (ev) {
                  ev.stopPropagation();
                  if (ev.keyCode == 13) {
                      if (iteratedColumn.search() !== this.value) {
                          ..table searching here
                      }
                  }
              });
  
• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  November 5 edited November 5

  The example I provided does work with server side processing. If the table is being sorted then that suggests you aren't using the orderCellsTop that Allan mentioned is needed for the two header solution. You shouldn't need the stopPropagation calls with this solution.

  Kevin
• castillocaleb Posts: 4Questions: 1Answers: 0

  November 5

  I got it to work by using the following:

              input.addEventListener('click', (ev) => {
                  ev.preventDefault();
                  ev.stopPropagation();
              });
  
              input.addEventListener('input', (ev) => {
                  ev.preventDefault();
                  ev.stopPropagation();
              });
  
              input.addEventListener('keydown', function (ev) {
                  if (ev.keyCode == 13) {
                      ev.preventDefault();
  
• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  November 5

  Sorry I must not be clear on what solution were are asking about. Here is the server side processing example of two header row with orderCellsTop:
  https://live.datatables.net/giharaka/1845/edit

  It doesn't need any of those event listeners to stopPropagation.

  Kevin