Фильтрация через бизнес-данные- * атрибуты с помощью jplist

Question

Я наткнулся на пример jplist, чтобы фильтровать элементы по тексту , который, на мой взгляд, прекрасно интегрируется со встроенной страницей. Вот моя попытка :

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

Тем не менее, мой вариант использования гораздо сложнее, чем просто это.Это выглядит следующим образом:

• В модале add-item для страницы редактирования меню есть модал, содержащий радиокнопки, которые фильтруют элементы списка по свойству data-model, которое все они содержат.(бизнес-логика)
• При нажатии указанной кнопки элементы HTML должны быть отфильтрованы в соответствии с этим свойством (а именно свойством Kind)
• Если в текстовом поле есть текст,набор результатов должен быть отфильтрован по нему
• (растянуть цель); если щелкнуть переключатель, состояние пейджера должно быть сброшено.
• Чтобы упростить UX, я также хочу выполнять постраничную доставку на заранее определенную сумму (скажем, 50 элементов за раз).

Есть ли способ сделать это с помощью этого фреймворка?