@!(data, className) @function header(){} @function body(){

# jPList State Event

On every sort, filter, pagination or other action jPList library sends jplist.state event. This event can be used to implement custom logic.

    //get a jPList control element
    const element = document.getElementById('my-jplist-control-element');

    //listen to the state event
    element.addEventListener('jplist.state', (e) => {

        //the whole state object
        console.log(e.jplistState);

        //jPList options provided by user
        console.log(e.jplistState.options);

        //current items number after filtering + pagination
        console.log(e.jplistState.itemsNumber);

        //control groups
        console.log(e.jplistState.groups);

        //the elements list after filtering + pagination
        console.log(e.jplistState.filtered);

    }, false);

} @render(process.cwd() + '/build/site/layouts/documentation.html', data, 'jPList State Event', header, body, 'api', 'jplist-state-event')