标签: list.js

我正在使用搜索构建分页索引.我有索引分页和工作,但我想添加prev/next和第一个/最后一个按钮,因为这必须是可扩展的.

List.JS似乎没有这些开箱即用,所以我尝试通过将lis 附加/前置到paginationdiv ul中来实现.这确实有效,除了点击后它们被删除.

加入分页div

$('.pagination').prepend('<li class="btn-next"> 9 </li>');

$('.pagination').append('<li class="btn-prev"> 0 </li>');

运行按钮的功能

$('.btn-next').on('click', function(){
    var list = $('.pagination').find('li');
    $.each(list, function(position, element){
        if($(element).is('.active')){
            $(list[position+1]).trigger('click');
        }
    })

})

$('.btn-prev').on('click', function(){
    var list = $('.pagination').find('li');
    $.each(list, function(position, element){
        if($(element).is('.active')){
            $(list[position-1]).trigger('click');
        }
    })

在此之后,我不知道我怎么能让他们保持附加,因为它似乎每次点击都重写它.有没有其他人使用List.JS创建这些按钮？

这是我的小提琴.

我想问一下如何使用 list.js 从两个或多个列表中检索过滤结果

让我用图片来解释：

这是我的 HTML：

<div id="SearchBarContainer" class="col l10 offset-l1">
                        <input name="SearchData" class="search" placeholder="Search Anything !" />
                        <h1 class="McqHeading">MCQs</h1>
                        <ul class="list">
                            <li>
                                <p class="mcq">Mcqs One</p>
                            </li>
                            <li>
                                <p class="mcq">Mcqs Two</p>
                            </li>
                            <li>
                                <p class="mcq">Mcqs Three</p>
                            </li>
                            <li>
                                <p class="mcq">Mcqs Four</p>
                            </li>
                            <li>
                                <p class="mcq">Mcqs Five</p>
                            </li>
                        </ul>
                        <h1 class="NotesHeading">Notes</h1>
                        <ul class="list2">
                            <li>
                                <p class="note">Notes One</p>
                            </li>
                            <li>
                                <p class="note">Notes Two</p>
                            </li>
                            <li>
                                <p class="note">Notes Three</p>
                            </li>
                            <li>
                                <p class="note">Notes Four</p>
                            </li>
                            <li>
                                <p class="note">Notes Five</p>
                            </li>
                        </ul>
                    </div>

这是我为此使用的 …