Documentation on defining the HTML Structure about jplist-es6 HOT 5 CLOSED

Hi,
Thank you for the feedback.

Unlike the previous version there is no need to define HTML DIV structure in initial options because IMHO it limits the number of possible HTML variants. Instead every control may have data-group property that indicates the name of DIV it belongs to. To illustrate this please check the following example:

<!-- hidden sort control -->
<div
    style="display: none"
    data-jplist-control="hidden-sort"
    data-group="group1"
    data-path=".name"
    data-order="asc"
    data-type="text"></div>
    
<!-- text filter control -->
<div>
    <input
        data-jplist-control="textbox-filter"
        data-group="group1"
        data-name="my-filter-1"
        data-path=".name"
        type="text"
        value=""
        data-clear-btn-id="name-clear-btn"
        placeholder="Filter by Name" />

    <button type="button" id="name-clear-btn">Clear</button>
</div>
    
<!-- content to filter -->
<div data-jplist-group="group1">

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

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

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

    ...

    <!-- no results control -->
    <div data-jplist-control="no-results" data-group="group1" data-name="no-results">No Results Found</div>

</div>

Here 'hidden sort control' and 'text filter control' both have data-group="group1" attribute. The HTML container with items that should be sorted and filtered has data-jplist-group="group1" attribute.
This way any control can be located in any location without restrictions.

Sticky feature can be achieved using CSS with position: fixed. I'm going to add this example to the examples section.

'Infinitive loading' and 'View More' - are you talking about ajax / server side version of a plugin?

Thanks

from jplist-es6.

Yes, I had confusing myself and can now see how the data-group is a good step forward to overcome different HTML structures.

I think in the context of your script and how it paginates using pages, this is possibly the best example:
https://infinite-scroll.com/demo/full-page/

Keep scrolling down and see the URL change from one page to the next. A concept like this negates the need to click the 'next page' but I assume would allow for your deep-linking function which is very useful.

A sticky example would be great.

I also notice that you 'text search' does not like the 'space bar' so I can only search for 'The sunlit face' in the example below by pasting it into the 'Description' search. However, type it in and the space continually disappears.

https://www.jplist.org/examples/nature

Thanks

from jplist-es6.

Hi,
Another feature that I really liked in the old script was the (count) that appeared in brackets by the the filters. Not sure if this exists in the new script as I couldn't find reference to it.

Thanks

from jplist-es6.

I've opened new issues for sticky , infinite scroll support and counter control.

Regarding the space bar in text search it can be configured almost the same way as before using data-regex option. I forgot to add this to documentation, thank you for pointing this out.

from jplist-es6.

I'm closing this issue, please refer to the following issues / bugs:

• Sticky
• Infinite scroll
• Implement counter control
• Text search control space issue

from jplist-es6.