JarCasting
JarCasting JarCasting

sm-pagination

WebJar for sm-pagination

License

License

MIT
Categories

Categories

Github Development Tools Version Controls
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

github-com-pinguxx-sm-pagination
Last Version

Last Version

0.1.2
Release Date

Release Date
Type

Type

jar
Description

Description

sm-pagination
WebJar for sm-pagination
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/pinguxx/sm-pagination

Download github-com-pinguxx-sm-pagination

Filename Size
github-com-pinguxx-sm-pagination-0.1.2.pom
github-com-pinguxx-sm-pagination-0.1.2.jar 27 KB
github-com-pinguxx-sm-pagination-0.1.2-sources.jar 22 bytes
github-com-pinguxx-sm-pagination-0.1.2-javadoc.jar 22 bytes
Browse

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/github-com-pinguxx-sm-pagination/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>github-com-pinguxx-sm-pagination</artifactId>
    <version>0.1.2</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-pinguxx-sm-pagination/
implementation 'org.webjars.npm:github-com-pinguxx-sm-pagination:0.1.2'
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-pinguxx-sm-pagination/
implementation ("org.webjars.npm:github-com-pinguxx-sm-pagination:0.1.2")
'org.webjars.npm:github-com-pinguxx-sm-pagination:jar:0.1.2'
<dependency org="org.webjars.npm" name="github-com-pinguxx-sm-pagination" rev="0.1.2">
  <artifact name="github-com-pinguxx-sm-pagination" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='github-com-pinguxx-sm-pagination', version='0.1.2')
)
libraryDependencies += "org.webjars.npm" % "github-com-pinguxx-sm-pagination" % "0.1.2"
[org.webjars.npm/github-com-pinguxx-sm-pagination "0.1.2"]

Dependencies

compile (1)

Group / Artifact Type Version
org.webjars.npm : mithril jar [0.2.0,0.3)

Project Modules

There are no modules declared in this project.

sm-pagination

Basic pagination for mithril and semantic, it can also be used with bootstrap (3+)

It requires mithril and semantic-ui-menu

Pagination file can be used with any common.js it is expect for mithril to be in global (m variable) or it will attempt to load it with require('mithril'), webpack its recommended

Example

Demo

Demo

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.10.3/semantic.min.css">
    <script src="bower_components/mithril/mithril.js"></script>
    <script src="Pagination.js"></script>
</head>
<body>
    
    <script src="test.js"></script>
</body>
</html>
function list(data) {
    return m('.ui.segment.sixteen.wide.column', [
        m('ul.ui.bulleted.list', data.map(function (item) {
            return m('li', {
                key: item.id
            }, item.name);
        }))
    ]);
}

function table(data) {
    return m('.ui.sixteen.wide.column', [
        m('table.ui.table', [
            m('tbody', data.map(function (item) {
                return m('tr', {
                    key: item.id
                }, [
                    m('td', item.id),
                    m('td', item.name)
                ]);
            }))
        ])
    ]);
}

module.controller = function () {
    module.vm.init();
    this.pagination = m.component(Pagination, {
        data: module.vm.data,
        rowsperpage: module.vm.rowsperpage,
        pagerender: list,
        wrapperclass: 'column'
    });
    this.paginationCtrl = new this.pagination.controller();
};

module.vm = {};
module.vm.init = function () {
    this.data = array;
    this.rowsperpage = 10;
    this.page = m.prop(3);
};


module.view = function (ctrl) {
    return m('.ui.grid.page.one.column', [
        m('h1', 'Pagination'),
        m.component(Pagination, {
            data: module.vm.data,
            rowsperpage: module.vm.rowsperpage,
            pagerender: list,
            wrapperclass: 'column',
            page: module.vm.page
        }),
        m.component(Pagination, {
            data: module.vm.data,
            rowsperpage: module.vm.rowsperpage,
            pagerender: table,
            wrapperclass: 'column'
        }),
        m('.row', [
            m('.column', [
                m('br')
            ])
        ]),
        ctrl.pagination.view(ctrl.paginationCtrl),
        m('.row', [
            m('.column', [
                m('button.ui.button', {
                    onclick: function () {
                        module.vm.data.splice(30, 10);
                        ctrl.paginationCtrl.goToPage(4);
                        module.vm.page(4);
                    }
                }, 'go to page 3')
            ])
        ])
    ]);
};

m.mount(window.document.body, module);

Attributes

It accepts the following properties

  • data, array of data to paginate
  • rowsperpage, # of rows to show each page
  • pagerender, page render function
  • wrapperclass, class to add to parent div
  • page, m.prop value of the current page
  • class object map with:
    • activeClass, applied to the active icons, defaults active
    • itemClass, applied to non icon items, defaults icon
    • leftIconClass, applied to the left arrow icon item, defaults left arrow icon
    • rightIconClass, applied to the right arrow icon item, defaults right arrow icon
    • iconItemClass, applied to the icon item items, defaults icon item,
    • disabledClass, applied to disaled items, defaults disabled
    • menuClass, applied to the menu pagination parent div, defaults ui pagination menu small

Bootstrap

To make it look good with bootstrap just pass the followin classes, tested with bootstrap 3+

classes: {
    leftIconClass: 'glyphicon glyphicon-arrow-left',
    rightIconClass: 'glyphicon glyphicon-arrow-right'
}

Versions

Version
0.1.2