Counter Control

Counter control can be used independently or together with any filter control to print filtered items number. Any kind of filter may be used: text, path or range.

See the Pen jPList Counter Control: Dynamic by 1rosehip (@1rosehip) on CodePen.

See the Pen jPList Counter Control: Static by 1rosehip (@1rosehip) on CodePen.

HTML Structure

Counter control is defined by required data-jplist-control="counter" data attribute. The data-group attribute defines group of elements that should be counted. All counters of the same group should have the same name or data-name attribute. The full list of data attributes can be found here.

The counter control could be of two types: static or dynamic. The static counter is updated only once on JPlist initialization. The dynamic counter is updated on every jPList action. The dynamic is the default one.

Below is an example of dynamic counter controls together with button path controls:

<!-- jplist styles - should not be added if bootstrap or other CSS framework is used -->
<link href="jplist.styles.css" rel="stylesheet" type="text/css" />

<!-- button path filter by title -->
<button
     data-jplist-control="buttons-path-filter"
     data-path=".title"
     data-group="group1"
     data-selected="true"
     data-mode="radio">
            Filter by title
</button>

<!-- title counter control -->
<span
        data-jplist-control="counter"
        data-group="group1"
        data-format="({count})"
        data-path=".title"
        data-mode="dynamic"
        data-name="counter-title-filter"
        data-filter-type="path"></span>

<!-- button path filter by description -->
<button
        data-jplist-control="buttons-path-filter"
        data-path=".desc"
        data-group="group1"
        data-mode="radio">
    Filter by description
</button>

<!-- description counter control -->
<span
        data-jplist-control="counter"
        data-group="group1"
        data-format="({count})"
        data-path=".desc"
        data-mode="dynamic"
        data-name="counter-desc-filter"
        data-filter-type="path"></span>

<!-- content to filter -->
<div data-jplist-group="group1">

    <div data-jplist-item>
        <p>
            <b>Title:</b>
            <span class="title">ddd</span>
        </p>
    </div>

    <div data-jplist-item>
        <p>
            <b>Description:</b>
            <span class="desc">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</span>
        </p>
    </div>

    <div data-jplist-item>
        <p>
            <b>Title:</b>
            <span class="title">bbb</span>
        </p>
    </div>

    <div data-jplist-item>
        <p>
            <b>Title:</b>
            <span class="title">ddd</span>
        </p>
    </div>

    <div data-jplist-item>
        <p>
            <b>Description:</b>
            <span class="desc">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</span>
        </p>
    </div>

    <div data-jplist-item>
        <p>
            <b>Title:</b>
            <span class="title">bbb</span>
        </p>
    </div>
    
    <div data-jplist-item>
        <p>
            <b>Title:</b>
            <span class="title">ddd</span>
        </p>
    </div>

</div>

<!-- jplist library -->
<script src="jplist.min.js"></script>
<script>
    jplist.init();
</script>

Common Data Attributes

The list of general data attributes.

Name Description Values
data-jplist-control Defines the counter control. "counter"
data-group Defines the group of items this control belongs to. For example, if a control has data-group="group1" then items group should have data-jplist-group="group1" data attribute. any text value
data-filter-type The type of the filter. it may be text, path or range. By default, data-name attribute has path value. text, path or range
data-format The HTML structure of the counter control with {count} placeholder that will be replaced with the actual counter value. The default value is {count}. any text or HTML
data-name The data-name attribute is used to identify the same controls in different panels. Different controls should have different data-name attributes. By default, data-name attribute has default value. any text value
data-mode static mode means that counter is updated on jPList initialization only
dynamic mode means that counter is updated on every jPList action 		static or dynamic; the default is dynamic

Path Filter Attributes

The list of data attributes for the path filter mode.

Name Description Values
data-path CSS selector that defines the HTML element that should be filtered "default" keyword for the initial value or any CSS selector
data-inverted If true, it's used to find all items that are not contained in the specified path. true or false

Text Filter Attributes

The list of data attributes for the text filter mode.

Name Description Values
data-path CSS selector that defines the HTML element that should be filtered "default" keyword for the initial value or any CSS selector
data-regex This optional data attribute defines characters that should be ignored during the filtering. For example, data-regex="[^a-zA-Z0-9]+" ignores all characters except English letters and numbers. JavaScript regex

Range Filter Attributes

The list of data attributes for the range filter mode.

Name Description Values
data-path CSS selector that defines the HTML element that should be filtered "default" keyword for the initial value or any CSS selector
data-from Minimal range value. numeric value
data-to Maximal range value. numeric value
data-min The minimal possible value numeric value
data-max The maximal possible value numeric value