时间戳

首页 > 解决方案 > List.js 默认应用过滤器

javascript - List.js 默认应用过滤器

问题描述

我是 Javascript 的初学者，希望能得到一些使用 List.js 库的指导。到目前为止，我已经创建了过滤器并且它们能够工作。但我希望默认表已经应用了过滤器“待交付”，因为这将是最常访问的页面。

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()
        }
    });
});

标签： javascriptlist.js

解决方案

您有重复的 ID。这是一个错误，因为 ID 必须是唯一的。

如果您需要从全部更改为选中的待交付，只需更改您的 html 将选中的属性从当前位置（全部）移动到待交付位置。

之后，调用你的updateList(); 在$("input[name=status]").change(updateList); 在您的 dom 就绪功能中。

您更新的代码笔

代码中的简短更改：

$(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>
    .......

推荐阅读