Utilizzo di list.js e ricerca non funzionante

Question

Questa è la mia prima volta che uso list.js e per qualche motivo non funziona.

Ecco un esempio dal vivo. http://hartslogmuseum.com/bookhjr10/test.php qui è ciò che il suo supposto per fare http://listjs.com/examples

E qui è il mio codice. Voglio cercare solo il nome.

<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

Quando si utilizza list.js con le tabelle si dovrebbe aggiungere class="list" a un tag <tbody> al posto del tag <table>.

Quindi nel tuo modifica del codice questa parte:

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

a

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

E non dimenticare di aggiungere il </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

Probabilmente hai dimenticato uno dei requisiti minimi.

questi sembrano i requisiti minimi:

1. indicare la tabella ID dell'elemento padre al momento della chiamata list.js
2. del tavolo tbody deve avere la classe list
3. Se la tabella ha già articoli (maggior parte dei casi avrei Supponiamo), il parametro valueNames delle opzioni è obbligatorio. Questi valori sono il nome della classe delle colonne che si desidera ordinare (nome classe definito in OGNI td, non nello th - sebbene sia possibile aggiungerlo anche allo th).
4. Le intestazioni di tabella utilizzati per l'ordinamento deve avere una classe di nome sort
5. Le intestazioni di tabella utilizzati per l'ordinamento deve avere un attributo data-sort con un valore corrispondente al nome del nome della classe della colonna da ordinare

Ecco un paio di esempi list.js codepen l'utilizzo di tabelle (questo è da http://listjs.com/examples/add-get-remove):

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

minimo esempio di codice:

Vedi anche su 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> 

Nota: se l'ordinamento comporta in modo strano - vale a dire. l'ordinamento non è corretto - potrebbe essere perché ti manca uno dei requisiti di base. Se lotti, fai un jsfiddle & e poniti la tua domanda su StackOverflow con un link.

---

Se si vuole evitare di utilizzare questo ID nell'elemento confezionamento, e utilizzare un selettore personalizzato, invece, è possibile sostituire:

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

Con questo:

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

vedere:

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

---

Se si desidera rilevare gli eventi di modifica innescati da List.js & atto di conseguenza (qui aggiorniamo i nomi delle classi fila di conseguenza)

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

List.js gestisce diversi tipi di eventi. Mostra lista completa in fondo this page http://listjs.com/docs/list-api

---

documentazione ufficiale http://listjs.com/docs/options