Не могу отсортировать HTML-таблицу с помощью sorttable.js

Question

Не могу отсортировать HTML-таблицу с помощью sorttable.js

У меня возникли проблемы при попытке отсортировать динамически создаваемую таблицу HTML. Я создаю его, используя Jade / Pug. Я пытаюсь использовать скрипт sorttable.js, найденный здесь http://www.kryogenix.org/code/browser/sorttable/. Я все еще новичок в html / javascript. Так что, если есть какая-то очевидная причина, почему она не работает, может кто-то указать на это, пожалуйста?

Вот часть HTML-кода, сгенерированного из шаблона

<html>
  <head>
   <script src="/path/to/sorttable.js"></script>
   <style>
    th.clickable:hover
    {
     color:green
    }    
    th, td
    {
     padding:5px;
    }
    th.clickable
    {
     cursor: pointer;    
    }
  </style>
 </head>
 <body>
 <script>
  var newTableObject = document.getElementById(tbl)
  sorttable.makeSortable(newTableObject)
 </script>
 <table class="sortable" id="tbl">
  <tr>
   <th class="clickable">id</th>
   <th class="clickable">value</th>
  </tr>
  <tr>
  <td>100</td>
  <td>100</td>
 </tr>
  <tr>
  <td>200</td>
  <td>200</td>
 </tr> 
</table>
</body>
</html>

Цель состоит в том, чтобы иметь его, чтобы при нажатии на заголовок таблица сортировалась по этому столбцу.

0

javascript html pug sorttable.js

Источник

user2770808 26 июл '16 в 19:04

2 ответа

Другие вопросы по тегам javascript html pug sorttable.js

user6641514 26 июл '16 в 19:24 2016-07-26 19:24 · Answer 1 · 2016-07-26 19:24

Пожалуйста, извините, если это уже известно... но тег script читается и выполняется всякий раз, когда браузер сталкивается с ним. Вы пытались поместить тег script после таблицы?

1

Источник

user6641514 26 июл '16 в 19:24

user1121919 26 июл '16 в 19:22 2016-07-26 19:22 · Answer 2 · 2016-07-26 19:22

В то время, когда ваш код выполняется:

var newTableObject = document.getElementById(tbl)
sorttable.makeSortable(newTableObject)

Ваша таблица еще не обработана и недоступна. Итак, вы проходите мимо undefined к sorttable.makeSortable метод. Вы можете проверить это, добавив оператор trace после получения элемента:

var newTableObject = document.getElementById(tbl)
console.log(newTableObject)

Вы должны подождать, чтобы запустить этот код после рендеринга вашей таблицы. Что-то вроде этого:

onLoad = function(){
    var newTableObject = document.getElementById(tbl)
    sorttable.makeSortable(newTableObject)
}

и объявить это так:

// using jQ
$(document).ready( onLoad())

или для простого JS

<body onload="onload()">