stationer / SortTable

A pure JavaScript (no dependencies) solution to make HTML Tables sortable
MIT License
37 stars 12 forks source link

Enhancement: Do Not Attach Click Event Handler to Cells Marked "js-sort-none" #5

Closed Whobeu closed 4 years ago

Whobeu commented 4 years ago

I was experimenting with marking some cells in a separate row in the "thead" section of a table as "js-sort-none". However, even though no sort indicator was shown, the cells were still clickable. I made a very slight change shown below to the code that attaches the click events and now only cells marked for sorting are clickable. Cells with class="js-sort-none" are not clickable:

    // Attach click events to table header
    for (var rowNum = 0; rowNum < THead.rows.length; rowNum++) {
      for (var cellNum = 0, colNum = 0; cellNum < THead.rows[rowNum].cells.length; cellNum++) {
        if (!THead.rows[rowNum].cells[cellNum].classList.contains("js-sort-none")) {
          // Define which column the header should invoke sorting for
          THead.rows[rowNum].cells[cellNum].setAttribute('data-js-sort-colNum', colNum);
          Handler = sortTable.getClickHandler(Tables[i], colNum);
          window.addEventListener
            ? THead.rows[rowNum].cells[cellNum].addEventListener('click', Handler)
            : window.attachEvent && THead.rows[rowNum].cells[cellNum].attachEvent('onclick', Handler);
          colNum += THead.rows[rowNum].cells[cellNum].colSpan;
        }
      }
    }
tyleruebele commented 4 years ago

It looks like the only difference is this check:

if (!THead.rows[rowNum].cells[cellNum].classList.contains("js-sort-none")) {

Which seems like a fine idea. I'll check it out. Thank you.

Whobeu commented 4 years ago

Yes that was the only change I needed to make.

tyleruebele commented 4 years ago

I made a similar adjustment and committed it. I also adjusted the demo.html to test with. I used an older way of class checking to maintain broader browser compatibility.