javascript 使用 list.js 排序和搜索不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20528593/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using list.js sort and search not working
提问by Pureblood
This is my first time using list.js and for some reason it is not working.
这是我第一次使用 list.js，但由于某种原因它不起作用。
Here is a live example. http://hartslogmuseum.com/bookhjr10/test.phphere is what its supposed to do http://listjs.com/examples
这是一个活生生的例子。 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>
回答by Adrien Be
You probably forgot one of the minimal requirements.
您可能忘记了最低要求之一。
These seem the minimal requirements:
这些似乎是最低要求：
- Indicate the table's parent element ID when calling
list.js - The table's
tbodymust have the classlist - 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 theth- although you can also add it to theth). - The table headers used for sorting must have a class of name
sort - The table headers used for sorting must have a attribute
data-sortwith a value matching the name of the column's class name to be sorted
- 调用时指明表的父元素ID
list.js - 表的
tbody必须有类list - 如果表已经有项目（我会假设大多数情况下），则选项的 valueNames 参数是必需的。这些值是您要排序的列的类名（在 EACH 中定义的类名
td，而不是在th- 尽管您也可以将其添加到th）。 - 用于排序的表头必须有一个名称类
sort - 用于排序的表头必须有一个属性
data-sort，该属性的值与要排序的列的类名的名称相匹配
Here are a couple of list.js codepen examples using tables (this is from http://listjs.com/examples/add-get-remove):
这里有几个使用表格的 list.js codepen 示例（来自http://listjs.com/examples/add-get-remove）：
Minimal code example:
最小代码示例：
see also on 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>
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.
注意：如果排序行为异常 - 即。排序不正确 - 可能是因为您缺少一项基本要求。如果您遇到困难，请使用 jsfiddle 并在 stackoverflow 上提出您的问题并提供链接。
If you want to avoid using this ID in the wrapping element, and use a custom selector instead, you can replace:
如果您想避免在包装元素中使用此 ID，而是使用自定义选择器，您可以替换：
var contactList = new List('my-cool-sortable-table-wrapper', options);
By this:
这样：
var wrapperElement = $('.my .custom .selector');
var contactList = new List(wrapperElement[0], options);
see:
看：
- Convert jQuery element to a regular dom element
- https://github.com/javve/list.js/issues/247#issuecomment-45215836
If you want to detect change events triggered by List.js& act accordingly (here we update row class names accordingly)
如果您想检测由List.js&触发的更改事件并相应地采取行动（这里我们相应地更新行类名称）
contactList.on("updated", function(){
$('#my-cool-sortable-table-wrapper tr').removeClass('odd').filter(':visible:odd').addClass("odd");
})
List.jshandles different event types. See full list at the bottom of this page http://listjs.com/docs/list-api
List.js处理不同的事件类型。查看本页底部的完整列表http://listjs.com/docs/list-api
Official documentation http://listjs.com/docs/options
回答by THelper
When using list.js with tables you should add class="list"to a <tbody>tag instead of the <table>tag.
将 list.js 与表一起使用时，您应该添加class="list"到<tbody>标签而不是<table>标签。
So in your code change this part:
所以在你的代码中改变这部分：
<table class="list table-bordered table-striped">
<tr>
to
到
<table class="table-bordered table-striped">
<tbody class="list">
<tr>
And don't forget to add a </tbody>.
并且不要忘记添加一个</tbody>.
回答by Systematix Infotech
***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>
