Blob: sortTable.js

Blob id: ab978233b229bc0c4787482418edcc0529fd7e87

Size: 2.7 KB

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
function sortTable (tableId, col, type) {
  const table = document.getElementById(tableId)
  const rows = table.rows

  let sorting = true

  while (sorting) {
    sorting = false

    for (let i = 1; i < rows.length - 1; i++) {
      let swap = false
      let x = rows[i].querySelectorAll('th, td')[col]
      let y = rows[i + 1].querySelectorAll('th, td')[col]

      if (x.dataset.sortValue) {
        x = x.dataset.sortValue
        y = y.dataset.sortValue
      } else {
        x = x.innerHTML
        y = y.innerHTML
      }

      if (type === 'number') {
        x = Number(x)
        y = Number(y)
      }

      if (x > y) {
        swap = true
      }

      if (swap) {
        rows[i].parentNode.insertBefore(rows[i + 1], rows[i])
        sorting = true
      }
    }
  }
}

function reverseTable (tableId) {
  const table = document.getElementById(tableId)
  const rows = table.rows
  const lastRow = rows.length - 1

  for (let i = 1; i < rows.length; i++) {
    rows[i].parentNode.insertBefore(rows[lastRow], rows[i])
  }
}

function getHeaders (table) {
  const head = table.getElementsByTagName('thead')[0]
  return Array.from(head.getElementsByTagName('th'))
}

function addSortListeners (tables) {
  tables.forEach(table => {
    const headers = getHeaders(table)
    const tableId = table.id

    for (let i = 0; i < headers.length; i++) {
      const header = headers[i]
      const columnNo = i
      let sortType

      if (header.dataset.type) {
        sortType = header.dataset.type
      } else {
        sortType = ''
      }

      header.addEventListener('click', (event) => {
        const target = event.target
        const sorted = (target.dataset.sorted === 'true')

        if (sorted) {
          reverseTable(tableId)
          const arrow = target.getElementsByTagName('span')[0]
          if (arrow.innerHTML === '↑') {
            arrow.innerHTML = '↓'
          } else {
            arrow.innerHTML = '↑'
          }
        } else {
          headers.forEach(header2 => {
            const arrow = header2.getElementsByTagName('span')[0]
            if (arrow) {
              if (header2.dataset.sorted === 'true') {
                arrow.innerHTML = '•'
              } else {
                arrow.innerHTML = ''
              }
            } else {
              header2.innerHTML += '<span></span>'
            }
            header2.dataset.sorted = false
          })

          sortTable(tableId, columnNo, sortType)
          target.dataset.sorted = true
          target.getElementsByTagName('span')[0].innerHTML = '↑'
        }
      })
    }
  })
}

const TABLES = Array.from(document.getElementsByClassName('sortTable'))

addSortListeners(TABLES)