使用list.js排序和搜索不起作用 [英] Using list.js sort and search not working

问题描述

这是我第一次使用list.js，由于某些原因它无法正常工作。

This is my first time using list.js and for some reason it is not working.

这是一个实例。
http://hartslogmuseum.com/bookhjr10/test.php
这是它应该做的事情
http://listjs.com/examples

这是我的代码。我只想搜索名称。

And here is my code. I want to search only the name.

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

推荐答案

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

You probably forgot one of the minimal requirements.

这些似乎是最低要求：

1. 在调用 list.js时指示表的父元素ID


2. 表的 tbody 必须有类列表


3. 如果表中已有项目（大多数情况下我会假设），则选项'valueNames参数是必需的。这些值是要排序的列的类名（类名在EACH td 中定义，而不是在 th - 虽然你也可以把它添加到 th ）。


4. 用于排序的表头必须有一个名为<的类code> sort


5. 用于排序的表头必须具有属性 data-sort 具有与要排序的列的类名称相匹配的值

1. Indicate the table's parent element ID when calling list.js
2. The table's tbody must have the class list
3. If the table already has items (most cases I would assume), the options' valueNames parameter is mandatory. These values are the class name of the columns you want to sort (class name defined in EACH td, not on the th - although you can also add it to the th).
4. The table headers used for sorting must have a class of name sort
5. The table headers used for sorting must have a attribute data-sort with a value matching the name of the column's class name to be sorted

以下是使用表格的几个list.js codepen示例（这是来自 http://listjs.com/examples/add-get-remove ） ：

Here are a couple of list.js codepen examples using tables (this is from http://listjs.com/examples/add-get-remove):

• http： //codepen.io/javve/pen/cLdfw


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

• 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上询问你的问题及其链接。

Note: if the sorting behaves strangely - ie. the sorting is incorrect - it might be because you are missing one of the basic requirements. If you struggle, do a jsfiddle & ask your question on stackoverflow with a link to it.

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

If you want to avoid using this ID in the wrapping element, and use a custom selector instead, you can replace:

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

由此：

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

参见：

• 将jQuery元素转换为常规dom元素


• https ：//github.com/javve/list.js/issues/247#issuecomment-45215836

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

如果要检测由 List.js &触发的更改事件。相应地行动（这里我们相应地更新行类名）

If you want to detect change events triggered by List.js & act accordingly (here we update row class names accordingly)

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

List.js 处理不同的事件类型。请参阅此页面底部的完整列表http://listjs.com/docs/list-api

List.js handles different event types. See full list at the bottom of this page http://listjs.com/docs/list-api

官方文件 http://listjs.com/docs/options

这篇关于使用list.js排序和搜索不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！