使用 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

您可能忘记了最低要求之一。

这些似乎是最低要求：

1. 调用list.js时指明表的父元素ID
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 上提出您的问题并附上指向它的链接。

---

如果您想避免在包装元素中使用此 ID，而是使用自定义选择器，您可以替换：

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

Answer 2

将 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 3

***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>