1rosehip / jplist-es6

jPList is a JavaScript library for sorting, pagination and filtering of any HTML structure like DIVs, UL/LI, tables, etc.
https://www.jplist.org/
MIT License
83 stars 39 forks source link

Not an issue, but rather a question #54

Open Archie22is opened 5 years ago

Archie22is commented 5 years ago

Hi guys.

Sorry to raise this over here, I understand it's not an issue but rather something that's not well presented in the documentation.

The pagination and filters work just okay, but I'd like to return to the first results page after applyting any of the four custom filters. Is there a way to return to the first page of the pagination after applying the custom filters? Have a look at my layout below:

<div id="jplist">
    <div class="c-tab-text centered">Filter by Type</div>

    <!-- Filter Buttons -->
    <div class="jplist-panel">
        <div class="jplist-group" data-control-type="button-filter-group" data-control-action="filter" data-control-name="button-filter-group-1" data-mode="multiple" data-jump-to-start="true">
            <div class="c-tab__nav blog-listing w-tab-menu">                 
                <span data-path=".ebook" data-button="true" class="c-tab__nav-tab w-inline-block w-tab-link"><div>eBook</div></span>
                <span data-path=".report" data-button="true" class="c-tab__nav-tab w-inline-block w-tab-link"><div>Reports</div></span>
                <span data-path=".white" data-button="true" class="c-tab__nav-tab w-inline-block w-tab-link"><div>Whitepaper</div></span>
                <span data-path=".web" data-button="true" class="c-tab__nav-tab w-inline-block w-tab-link"><div>Webinar</div></span>
            </div>
        </div>
    </div>  

    <!-- No results -->
    <div class="jplist-no-results">
        <!--<p>No results found</p> -->
    </div>

    <!-- Listing -->
    <div class="event-listing postListing list" id="event-listing">
        <!-- Stuff here.... -->
    </div>
</div>

<!-- Paginations -->
<div class="jplist-panel">
    <div 
     class="jplist-pagination" 
     data-control-type="pagination" 
     data-control-name="paging" 
     data-control-action="paging"
     data-items-per-page="9"
     data-range="9"
     data-jump-to-start="true"
     data-mode="google-like">
    </div>
</div>
$('document').ready(function(){
    setTimeout(reveal, 2500);
    $('#jplist').jplist({               
        itemsBox: '.list', 
        itemPath: '.list-item',
        panelPath: '.jplist-panel',
        effect: 'fade',
        duration: 250,  //animation duration
        fps: 72, //frames per second value
        deepLinking: true,
        redrawCallback: function(collection, $dataview, statuses){
            //console.log( collection );
        }   
    });
});

Any step in the right direction will be greatly appreciated. I battled to make sense of the documentation.