List.js 默认应用过滤器
List.js apply filter by default
我是 Javascript 的初学者,希望得到一些使用 List.js 库的指导。到目前为止,我已经创建了过滤器并且它们能够工作。但我希望默认 table 已经应用过滤器 'Pending Delivery',因为这将是最常访问的页面。
HTML
(已经有过滤器的代码)
<table class="order-table table table-hover table-striped">
<thead>
<th>S/N</th>
<th>Order ID</th>
<th>Customer Name</th>
<th>Route Number</th>
<th>Order Date</th>
<th>Delivery Date</th>
<th>Status</th>
</thead>
<tbody class="list">
<tr>
<td>1</td>
<td class='orderId'>5</td>
<td>Matilda Tan</td>
<td>16</td>
<td>2018-06-29</td>
<td>2018-06-29</td>
<td class='sts'>Pending Delivery</td>
</tr>
<tr>
<td>2</td>
<td class='orderId'>7</td>
<td>Xena Yee</td>
<td>01</td>
<td>2018-06-21</td>
<td>2018-06-23</td>
<td class='sts'>Delivered</td>
</tr>
<div class="no-result">No Results</div>
<ul class="pagination"></ul>
</div>
</div>
</div>
JS
var options = {
valueNames: [
'name',
'sts',
{ data: ['status']}
],
page: 5,
pagination: true
};
var userList = new List('users', options);
function resetList(){
userList.search();
userList.filter();
userList.update();
$(".filter-all").prop('checked', true);
$('.filter').prop('checked', false);
$('.search').val('');
//console.log('Reset Successfully!');
};
function updateList(){
var values_status = $("input[name=status]:checked").val();
console.log(values_status);
userList.filter(function (item) {
var statusFilter = false;
if(values_status == "All")
{
statusFilter = true;
} else {
statusFilter = item.values().sts == values_status;
}
return statusFilter
});
userList.update();
//console.log('Filtered: ' + values_gender);
}
$(function(){
//updateList();
$("input[name=status]").change(updateList);
userList.on('updated', function (list) {
if (list.matchingItems.length > 0) {
$('.no-result').hide()
} else {
$('.no-result').show()
}
});
});
您有重复的 ID。这是一个错误,因为 ID 必须是唯一的。
如果您需要从 All 更改为 Pending Delivery 选择,只需更改 html 移动 checked 属性从当前位置(全部)到 Pending Delivery 位置。
之后,在 $("input[name=status]").change(updateList); 之后调用你的 updateList();您的 dom 就绪函数。
你的更新codepen
代码中的简短更改:
$(function(){
//updateList();
$("input[name=status]").change(updateList);
updateList(); // this line added
userList.on('updated', function (list) {
if (list.matchingItems.length > 0) {
$('.no-result').hide()
} else {
$('.no-result').show()
}
});
});
<div class="container">
<div class="row">
<div id="users" class="col-xs-12">
<div class="filter-group row">
<div class="form-group col-xs-12 col-sm-12 col-md-4">
<input type="text" class="search form-control" placeholder="Search" />
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-4">
<div class="radio-inline">
<label>
<input class="filter-all" type="radio" value="All"
name="status" id="status-all"/> All <!-- removed checked -->
</label>
</div>
<div class="radio-inline">
<label>
<input class="filter" type="radio"
value="Pending Delivery" name="status" id="status-pending" checked/>
Pending <!-- added checked -->
</label>
</div>
.......
我是 Javascript 的初学者,希望得到一些使用 List.js 库的指导。到目前为止,我已经创建了过滤器并且它们能够工作。但我希望默认 table 已经应用过滤器 'Pending Delivery',因为这将是最常访问的页面。
HTML (已经有过滤器的代码)
<table class="order-table table table-hover table-striped">
<thead>
<th>S/N</th>
<th>Order ID</th>
<th>Customer Name</th>
<th>Route Number</th>
<th>Order Date</th>
<th>Delivery Date</th>
<th>Status</th>
</thead>
<tbody class="list">
<tr>
<td>1</td>
<td class='orderId'>5</td>
<td>Matilda Tan</td>
<td>16</td>
<td>2018-06-29</td>
<td>2018-06-29</td>
<td class='sts'>Pending Delivery</td>
</tr>
<tr>
<td>2</td>
<td class='orderId'>7</td>
<td>Xena Yee</td>
<td>01</td>
<td>2018-06-21</td>
<td>2018-06-23</td>
<td class='sts'>Delivered</td>
</tr>
<div class="no-result">No Results</div>
<ul class="pagination"></ul>
</div>
</div>
</div>
JS
var options = {
valueNames: [
'name',
'sts',
{ data: ['status']}
],
page: 5,
pagination: true
};
var userList = new List('users', options);
function resetList(){
userList.search();
userList.filter();
userList.update();
$(".filter-all").prop('checked', true);
$('.filter').prop('checked', false);
$('.search').val('');
//console.log('Reset Successfully!');
};
function updateList(){
var values_status = $("input[name=status]:checked").val();
console.log(values_status);
userList.filter(function (item) {
var statusFilter = false;
if(values_status == "All")
{
statusFilter = true;
} else {
statusFilter = item.values().sts == values_status;
}
return statusFilter
});
userList.update();
//console.log('Filtered: ' + values_gender);
}
$(function(){
//updateList();
$("input[name=status]").change(updateList);
userList.on('updated', function (list) {
if (list.matchingItems.length > 0) {
$('.no-result').hide()
} else {
$('.no-result').show()
}
});
});
您有重复的 ID。这是一个错误,因为 ID 必须是唯一的。
如果您需要从 All 更改为 Pending Delivery 选择,只需更改 html 移动 checked 属性从当前位置(全部)到 Pending Delivery 位置。
之后,在 $("input[name=status]").change(updateList); 之后调用你的 updateList();您的 dom 就绪函数。
你的更新codepen
代码中的简短更改:
$(function(){
//updateList();
$("input[name=status]").change(updateList);
updateList(); // this line added
userList.on('updated', function (list) {
if (list.matchingItems.length > 0) {
$('.no-result').hide()
} else {
$('.no-result').show()
}
});
});
<div class="container">
<div class="row">
<div id="users" class="col-xs-12">
<div class="filter-group row">
<div class="form-group col-xs-12 col-sm-12 col-md-4">
<input type="text" class="search form-control" placeholder="Search" />
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-4">
<div class="radio-inline">
<label>
<input class="filter-all" type="radio" value="All"
name="status" id="status-all"/> All <!-- removed checked -->
</label>
</div>
<div class="radio-inline">
<label>
<input class="filter" type="radio"
value="Pending Delivery" name="status" id="status-pending" checked/>
Pending <!-- added checked -->
</label>
</div>
.......