Question

我偶然发现了filter elements by text的jplist示例，根据我的喜好，它与内置的页面调度很好地集成在一起。 Here's my attempt at it：

HTML

<h1><a href="https://jplist.org/documentation/controls/pagination">jPList Pagination Control</a></h1>

<div class=box>
    <input
         data-jplist-control="textbox-filter"
         data-group="data-group-1"
         data-name="my-filter-1"
         data-path=".name"
         type="text"
         value=""
         placeholder="Filter by Name"
         data-clear-btn-id="name-clear-btn"
    />

</div>

<div class="controls">


    <!-- pagination control -->
    <div
            data-jplist-control="pagination"
            data-group="data-group-1"
            data-items-per-page="5"
            data-current-page="0"
            data-name="pagination1">

        <div class="row mb-3">

            <button type="button" data-type="first">«</button>
            <button type="button" data-type="prev">‹</button>

            <div class="jplist-holder" data-type="pages">
                <button type="button" data-type="page">{pageNumber}</button>
            </div>

            <button type="button" data-type="next">›</button>
            <button type="button" data-type="last">»</button>

        </div>

        <div class="row">

            <!-- items per page select -->
<!--             <input data-type=items-per-page type=hidden value=50 /> -->
            <select data-type="items-per-page">
                <option value="3"> 3 per page </option>
                <option value="5"> 5 per page </option>
                <option value="50"> 50 per page </option>
                <option value="0"> view all </option>
            </select>

            <span data-type="info">
                Page {pageNumber} of {pagesNumber}
            </span>
        </div>
    </div>

</div>

<!-- content to filter -->
<ul data-jplist-group="data-group-1">

    <!-- item -->
    <div data-jplist-item>
        <li class=name>Alejandro Miles</div>
    </div>

    <!-- item -->
    <div data-jplist-item>
        <li class=name>Allie Moss</div>
    </div>

    <!-- item -->
    <div data-jplist-item>
        <li class=name>Andy Harris</div>
    </div>

    <!-- item -->
    <div data-jplist-item>
        <li class=name>Cecilia Hanson</div>
    </div>

    <!-- item -->
    <div data-jplist-item>
        <li class=name>Deanna Castillo</div>
    </div>

    <!-- item -->
    <div data-jplist-item>
        <li class=name>Danny Richards</div>
    </div>

    <!-- item -->
    <div data-jplist-item>
        <li class=name>Stefanie Reyes</div>
    </div>

    <!-- item -->
    <div data-jplist-item>
        <li class=name>Jakob Flores</div>
    </div>

    <!-- item -->
    <div data-jplist-item>
        <li class=name>Christine Richards</div>
    </div>

    <!-- item -->
    <div data-jplist-item>
        <li class=name>Miranda Hill</div>
    </div>

    <!-- item -->
    <div data-jplist-item>
        <li class=name>Meghan Williamson</div>
    </div>

    <!-- item -->
    <div data-jplist-item>
        <li class=name>Kierra Long</div>
    </div>

    <!-- item -->
    <div data-jplist-item>
        <li class=name>Tara Park</div>
    </div>

    <!-- item -->
    <div data-jplist-item>
        <li class=name>Anthony Reyes</div>
    </div>

    <!-- item -->
    <div data-jplist-item>
        <li class=name>Malik Becker</div>
    </div>

    <!-- item -->
    <div data-jplist-item>
        <li class=name>Daisy Hunter</div>
    </div>

    <!-- item -->
    <div data-jplist-item>
        <li class=name>Arianna Fuller</div>
    </div>

    <!-- item -->
    <div data-jplist-item>
        <li class=name>Stephan Wang</div>
    </div>

    <!-- item -->
    <div data-jplist-item>
        <li class=name>Cristal Wallace</div>
    </div>

    <!-- item -->
    <div data-jplist-item>
        <li class=name>Alyson Chandler</div>
    </div>

    <div data-jplist-item>
      <li class=name>Mike Warren</div>
    </div>
    <!-- no results control -->               
    <div data-jplist-control="no-results" data-group="data-group-1" data-name="no-results">No Results Found</div>

</ul>

JavaScript

jplist.init();

但是，我的用例远不止于此。如下：

在菜单编辑页面的添加项模式中，我有一个模式，其中包含单选按钮，这些单选按钮通过它们都包含的data-model上的属性来过滤列表项（业务逻辑）
单击该按钮时，应根据该属性（即属性Kind）过滤HTML元素
如果文本字段中有文本，则应使用结果过滤结果集
（伸展目标），如果单击单选按钮，则应重置寻呼机状态。
为了简化UX，我还想按预定义的数量（例如一次50个项目）进行分页。

是否可以使用此框架来完成此任务？

使用jplist通过业务数据-*属性进行过滤

0 个答案: