Использование list.js сортировка и поиск не работают

Question

Это мой первый опыт использования list.js, и по какой-то причине он не работает.

Настоящий живой пример. http://hartslogmuseum.com/bookhjr10/test.php вот что его должен делать http://listjs.com/examples

И вот мой код. Я хочу искать только имя.

<div class="table-responsive"> 
<div id="catalog"> 
<input class="search" placeholder="Search" /> 
    <button class="sort" data-sort="name"> 
    Sort Name 
    </button> 
    <button class="sort" data-sort="cat"> 
    Sort Category 
    </button> 
<h2> Catalog </h2> 
<table class="list table-bordered table-striped"> 
<tr> 
<td> <h2 class="name">Item Name</h2> </td> 
<td><h2 class="cat">Item Category</h2></td> 
<td> <h2>Thumbnail</h2></td> 
<td> <h2 class="descr">Item Desc</h2> </td> 
<td> <h2 class="time">Time Frame</h2> </td> 
<td> <h2 class="donor">Donor</h2> </td> 


</tr> 
$resultSet = mysqli_query($conn,"SELECT * FROM bookhjr10_items"); 

While($row = mysqli_fetch_array($resultSet)) 
{ 
$i=0; 
echo "<tr>"; 
echo "<td class=\"name\">".$row['name']. "</td>"; 
echo "<td class=\"cat\">".$row['category']. "</td>"; 
echo "<td><a href=\"fullimage.php?id=".$row['id']."\" data-lightbox=\pic\"><img src=\"image.php?id=".$row['id']."\" alt=\"thumb-1\" /></a></td>"; 
echo "<td class=\"descr\">". $row['descr'] . "</td>"; 
echo "<td class=\"time\">". $row['time'] . "</td>"; 
echo "<td class=\"donor\">". $row['donor'] . "</td>"; 
echo "</tr>"; 
$i++; 
} 

?> 
</table> 
</div> 
     </div> 
     <script type="text/javascript"> 
var options = { 
    valueNames: [ 'name' ] 
}; 

var hackerList = new List('catalog', options); 
</script> 

Answer 1

При использовании list.js с таблицами, вы должны добавить class="list" к <tbody> тег вместо <table> тега.

Так что в вашем изменении кода этой части:

<table class="list table-bordered table-striped"> 
<tr> 

в

<table class="table-bordered table-striped"> 
<tbody class="list"> 
<tr> 

И не забудьте добавить </tbody>.

Answer 2

***Add php tag before you start php code in an html content.*** 
//You can refer to below example: 
<div class="table-responsive"> 
<div id="catalog"> 
<input class="search" placeholder="Search" /> 
    <button class="sort" data-sort="name"> 
    Sort Name 
    </button> 
    <button class="sort" data-sort="cat"> 
    Sort Category 
    </button> 
<h2> Catalog </h2> 
<table class="list table-bordered table-striped"> 
<tr> 
<td> <h2 class="name">Name</h2> </td> 
</tr> 
<?php 
$sql="SELECT * FROM country"; 
$resultSet = mysql_query($sql,$conn); 
while($row = mysql_fetch_array($resultSet)) 
{?> 
<tbody > 
<tr><td class="name"> 
<?php 
$i=0; 
echo $row['cn_name']; 
$i++; 
}?> 
</td></tr> 
</tbody> 
</table> 
</div> 
     </div> 
//Javascript 
<script src="http://listjs.com/no-cdn/list.js"></script> 

     <script type="text/javascript"> 
var options = { 
    valueNames: [ 'name' ]//you can specify more columns by adding , 
}; 

var hackerList = new List('catalog', options); 
</script> 

Answer 3

Возможно, вы забыли одно из минимальных требований.

Они, кажется, минимальные требования:

1. указывают на таблицы родительский элемент ID при вызове list.js
2. стола tbody должны иметь класс list
3. Если таблица уже имеет элементы (в большинстве случаев я бы предположим) параметр параметра valueNames является обязательным. Эти значения - это имя класса столбцов, которые вы хотите отсортировать (имя класса определено в EACH td, а не на th - хотя вы также можете добавить его в th).
4. заголовки таблицы, используемые для сортировки должны иметь класс имя sort
5. заголовки таблицы, используемые для сортировки должен иметь атрибут data-sort со значением, соответствующим именем имени класса столбца для сортировки

Вот несколько примеров list.js codepen с помощью таблиц (это из http://listjs.com/examples/add-get-remove):

• http://codepen.io/javve/pen/cLdfw
• http://codepen.io/anon/pen/IvlsJ

Минимальный пример кода:

смотри также на http://jsfiddle.net/d7fJs/

<!-- for a table with a parent div of id "my-cool-sortable-table-wrapper", --> 
<!-- and columns of class names "gender", "age" & "city" --> 

<div id="my-cool-sortable-table-wrapper"> 
    <table> 
     <thead> 
      <th class="sort" data-sort="gender">Gender</th> 
      <th class="sort" data-sort="age">Age</th> 
      <th class="sort" data-sort="city">City</th> 
     </thead> 
     <tbody class="list"> 
      <tr> 
       <td class="gender">male</td> 
       <td class="age">18</td> 
       <td class="city">Berlin</td> 
      </tr> 
      <tr> 
       <td class="gender">female</td> 
       <td class="age">46</td> 
       <td class="city">Reykjavik</td> 
      </tr> 
      <tr> 
       <td class="gender">female</td> 
       <td class="age">20</td> 
       <td class="city">Lisboa</td> 
      </tr> 
      <!-- and so on ...--> 
     </tbody> 
    </table> 
</div> 

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script> 
<script type="text/javascript"> 
    var options = { 
     valueNames: [ 'gender', 'age', 'city' ] 
    }; 
    var contactList = new List('my-cool-sortable-table-wrapper', options); 
</script> 

Примечание: если сортировка ведет себя странно - то есть. сортировка неверна - возможно, это потому, что вам не хватает одного из основных требований. Если вы боретесь, сделайте jsfiddle & задайте свой вопрос о stackoverflow со ссылкой на него.

---

Если вы хотите, чтобы избежать использования этого идентификатора в элементе оберточной, и использовать пользовательский селектор вместо этого, вы можете заменить:

var contactList = new List('my-cool-sortable-table-wrapper', options); 

К этому:

var wrapperElement = $('.my .custom .selector'); 
var contactList = new List(wrapperElement[0], options); 

посмотреть:

• Convert jQuery element to a regular dom element
• https://github.com/javve/list.js/issues/247#issuecomment-45215836

---

Если вы хотите, чтобы обнаружить события изменения, запускаемые List.js & действовать соответствующим образом (здесь мы обновляем имена строк класса соответственно)

contactList.on("updated", function(){ 
    $('#my-cool-sortable-table-wrapper tr').removeClass('odd').filter(':visible:odd').addClass("odd"); 
}) 

List.js обрабатывает различные типы событий. Просмотреть полный список в нижней части this page http://listjs.com/docs/list-api

---

Официальная документация http://listjs.com/docs/options