Не могу отсортировать 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>
Цель состоит в том, чтобы иметь его, чтобы при нажатии на заголовок таблица сортировалась по этому столбцу.
2 ответа
Пожалуйста, извините, если это уже известно... но тег script читается и выполняется всякий раз, когда браузер сталкивается с ним. Вы пытались поместить тег script после таблицы?
В то время, когда ваш код выполняется:
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()">