List.js apply filter by default

Question

I am a beginner in Javascript and would appreciate some guidance in using the List.js library. So far, I have created the filters and they are able to work. But I would like the default table to have filter 'Pending Delivery' applied already as this would be the most commonly accessed page.

HTML (There is already code for the filters)

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

Answer 1

You have duplicated IDs. That's an error because an ID must be unique.

If you need to change from All to Pending Delivery selected it is enough to change your html moving the checked attribute from current position (All) to the Pending Delivery position.

After, call your updateList(); after the $("input[name=status]").change(updateList); in your dom ready function.

Your updated codepen

The short changes in your code:

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