Sortowanie i wyszukiwanie list.js nie działa

Question

To jest mój pierwszy raz używając list.js iz jakiegoś powodu nie działa.

Oto przykład na żywo. http://hartslogmuseum.com/bookhjr10/test.php oto co jej robić http://listjs.com/examples

I tu jest mój kod. Chcę wyszukać tylko nazwisko.

<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

Podczas korzystania z tabel list.js należy dodać class="list" do <tbody> tagu zamiast znacznika <table>.

Więc w swojej zmiany kodu ta część:

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

do

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

I nie zapomnij dodać </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

Prawdopodobnie zapomniałeś o jednym z minimalnych wymagań.

Te wydają się minimalne wymagania:

1. wskazują stołu elementu nadrzędnego identyfikatora podczas wywoływania list.js
2. stołu tbody musi mieć klasę list
3. Jeśli tabela ma już przedmiotów (większość przypadków będę Załóżmy, że parametr optionsNames jest obowiązkowy. Te wartości to nazwa klasy kolumn, które chcesz sortować (nazwa klasy zdefiniowana w KAŻDEJ td, a nie na th - chociaż możesz również dodać ją do th).
4. Nagłówki tabeli używanej do sortowania muszą mieć klasę nazwy sort
5. Nagłówki tabeli używanej do sortowania musi mieć atrybut data-sort o wartości odpowiadającej nazwy nazwy klasy kolumny, aby posortować

Oto kilka przykładów list.js codepen użyciu tabel (to jest od http://listjs.com/examples/add-get-remove):

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

Minimal przykładowy kod:

zobaczyć również na 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> 

Uwaga: jeśli Sortowanie zachowuje się dziwnie - tzn. sortowanie jest nieprawidłowe - może to wynikać z tego, że brakuje jednego z podstawowych wymagań. Jeśli masz problem, zrób jsfiddle & zadaj pytanie na stackoverflow z linkiem do niego.

---

Jeśli chcesz uniknąć korzystania z tego identyfikatora w elemencie owijania i używać selektor niestandardowego zamiast, można wymienić:

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

Przez to:

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

Apostolskiej:

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

---

Jeśli chcesz wykrywać zdarzenia zmian wywołanych przez List.js & aktu odpowiednio (tu aktualizować nazwy klas wierszy Odpowiednio)

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

List.js obsługuje różne typy zdarzeń. Zobacz pełną listę u dołu this page http://listjs.com/docs/list-api

---

oficjalnej dokumentacji http://listjs.com/docs/options