# 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