Pagination

_This widget need to be improved in future version!

Demos

Theme: default

  <ul data-am-widget="pagination"
      class="am-pagination am-pagination-default"
      >

      <li class="am-pagination-first ">
        <a href="#" class="">第一页</a>
      </li>

      <li class="am-pagination-prev ">
        <a href="#" class="">上一页</a>
      </li>


            <li class="">
              <a href="#" class="">1</a>
            </li>
            <li class="am-active">
              <a href="#" class="am-active">2</a>
            </li>
            <li class="">
              <a href="#" class="">3</a>
            </li>
            <li class="">
              <a href="#" class="">4</a>
            </li>
            <li class="">
              <a href="#" class="">5</a>
            </li>


      <li class="am-pagination-next ">
        <a href="#" class="">下一页</a>
      </li>

      <li class="am-pagination-last ">
        <a href="#" class="">最末页</a>
      </li>
  </ul>

Theme: select

  <ul data-am-widget="pagination"
      class="am-pagination am-pagination-select"
      >


      <li class="am-pagination-prev ">
        <a href="#" class="">上一页</a>
      </li>


        <li class="am-pagination-select">
          <select>
              <option value="#" class="">1
                / 3
              </option>
              <option value="#" class="">2
                / 3
              </option>
              <option value="#" class="">3
                / 3
              </option>
          </select>
        </li>


      <li class="am-pagination-next ">
        <a href="#" class="">下一页</a>
      </li>

  </ul>

Usage

Copy and Paste

Copy the codes in examples, and paste it to the <body> of the Amaze UI HTML template(Download);
Replace the contents in examples with your own contents.

Using Handlebars

The Handlebars partial of this widget is pagination. See Accordion for more details.

Allmobilize WebIDE

Drag the widget to the edit interface;
Click the Data binding button on the right panel, and bind data using following format.

var data = {
  "prevTitle": "Prev",  //(Optional) The texts shown in prev button
  "prevLink": "#",        //(Optional) Href of prev link

  "nextTitle": "Next",  //(Optional) The texts shown in next button
  "nextLink": "#",        //(Optional) Href of next link

  "firstTitle": "First", //(Optional) The texts shown in first page button
  "firstLink": "#",       //(Optional) Href of first link

  "lastTitle": "Last",  //(Optional) The texts shown in last page button
  "lastLink": "#",        //(Optional) Href of last link

  "total": "",            // (Optional) Show the total page number. Only available in "select" theme. Only show current page number if assign an empty string to total.

  "page": [
    {
      "title": "1",
      "link": "#"     //Link to first page.
    },
    {
      "title": "2",
      "link": "#"
    }
  ]
};

return data;

数据结构

{
  "id": "",

  // Customized Class
  "className": "",

  // Theme
  "theme": "default",

  "options": {
    "select": ""
  },

  "content": {
    // Previous Page
    "prevTitle": "上一页",
    "prevLink": "#",

    // First Page
    "firstTitle": "第一页",
    "firstLink": "#",

    // Optional
    "nextTitle": "下一页",
    "nextLink": "#",

    // Optional
    "lastTitle": "最末页",
    "lastLink": "#",

    "total": "", // Total page number

    "page": [
      {
        "title": "1",
        "link": "#",
        "className": ""
      }
    ]
  }
}

Amaze UI 2.4

Web Components

TOC

Usage

Copy and Paste

Using Handlebars

Allmobilize WebIDE

数据结构