![](/img/trans.png)
[英]list.js - Custom sort function on button click without jQuery
[英]Why isn't list.js working when I click the button when I am trying to sort my list
這是我的代碼。 我不知道我在想什么。 我去了list.js文檔,並遵循了每個步驟。 我什至去jfiddle並做了一個例子,它奏效了。 我認為我做錯了事,也許是因為我在使用ejs。 有人可以幫我嗎。 下面是我的HTML代碼和Javascript。
謝謝
<div class="client-names">
<!-- class="search" automagically makes an input a search field. -->
<input class="search" placeholder="Search" />
<!-- class="sort" automagically makes an element a sort buttons. The date-sort value decides what to sort by. -->
<button class="sort" data-sort="fname">
Sort By First Name
</button>
<button class="sort" data-sort="lname">
Sort by Last Name
</button>
<ul class="list">
<% clients.forEach(function(client) { %>
<li>
<span class="lname"><%= client.lname %></span>
<span class="fname"><%= client.fname %></span>
<br>
<form class="delete-form" action="/clients/<%= client._id %>?_method=DELETE" method="POST">
<button class="btn btn-danger btn-md" data-id="<%= client._id %>" id="delete-client">Delete Client</button>
</form>
<a href="/clients/<%= client._id %>" data-id="<%= client._id %>" class="btn btn-primary btn-md view-client-button">View Client</a>
</li>
<% }); %>
</ul>
</div>
JAVASCRIPT
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script src="/js/main.js"></script>
<script type="text/javascript">
var options = {
valueNames: ['lname', 'fname']
};
var clientList = new List('client-names', options);
</script>
list.js在初始化時需要一個元素作為第一個參數。 從文檔 :
新列表(id /元素,選項,值):
id或element * required標識應在其中初始化列表區域的元素。 或實際元素本身。
因此,如果更改此行:
<div class="client-names">
至:
<div id="client-names">
您的代碼有效。
相反,如果需要使用類名,則需要按類獲取元素,例如:
var clientList = new List(document.getElementsByClassName('client-names')[0], options);
如何排序...
將click事件處理程序添加到您的排序按鈕並調用sort方法就足夠了:
$('.sort').on('click', function(e) {
clientList.sort(this.dataset.sort, { order: "asc" });
})
或使用javascript:
document.querySelectorAll('.sort').forEach(function(ele, idx) {
ele.addEventListener('click', function(e) {
clientList.sort(this.dataset.sort, { order: "asc" });
});
});
var options = { valueNames: ['lname', 'fname'] }; var clientList = new List(document.getElementsByClassName('client-names')[0], options); document.querySelectorAll('.sort').forEach(function(ele, idx) { ele.addEventListener('click', function(e) { clientList.sort(this.dataset.sort, { order: "asc" }); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script> <div class="client-names"> <!-- class="search" automagically makes an input a search field. --> <input class="search" placeholder="Search" /> <!-- class="sort" automagically makes an element a sort buttons. The date-sort value decides what to sort by. --> <button class="sort" data-sort="lname"> Sort By First Name </button> <button class="sort" data-sort="fname"> Sort by Last Name </button> <ul class="list"> <li> <span class="lname">name3</span> <span class="fname">name2</span> <br> <form class="delete-form" action="/clients/<%= client._id %>?_method=DELETE" method="POST"> <button class="btn btn-danger btn-md" data-id="<%= client._id %>" id="delete-client1">Delete Client</button> </form> <a href="/clients/<%= client._id %>" data-id="<%= client._id %>" class="btn btn-primary btn-md view-client-button">View Client</a> </li> <li> <span class="lname">name2</span> <span class="fname">name5</span> <br> <form class="delete-form" action="/clients/<%= client._id %>?_method=DELETE" method="POST"> <button class="btn btn-danger btn-md" data-id="<%= client._id %>" id="delete-client2">Delete Client</button> </form> <a href="/clients/<%= client._id %>" data-id="<%= client._id %>" class="btn btn-primary btn-md view-client-button">View Client</a> </li> </ul> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.