JSFiddle - React, Tailwind, and code Playground

by Zheng Haibo

HTML

<script src="https://rawgit.com/regularjs/regular/master/dist/regular.js"></script>
<div id="bind1">

    <h2>bind-style 1</h2>

</div>
<div id="bind2">
    <h2>bind-style 2</h2>
</div>
<div id="bind3">
    <h2>bind-style 3</h2>
</div>
<div id="bind_chain">
        <h2>bind-chain</h2>
</div>

<script>
void function(){
  window.Pager = Regular.extend({
    name: 'pager',
    template: 
     "<div class='m-page {{clazz}}'>\
         <a  href='javascript:;' on-click={{ this.nav(current-1)}} class='pageprv {{current==1? \"z-dis\": \"\"}}'>上一页</a>\
          {{#if total - 5 > show * 2}}\
            <a href='javascript:;' on-click={{ this.nav(1)}} class={{current==1? 'z-crt': ''}}>1</a>\
            {{#if begin > 2}}<i>...</i>{{/if}}\
            {{#list begin..end as i}}\
            <a href='javascript:;'on-click={{ this.nav(i)}} class={{current==i? 'z-crt': ''}} >{{i}}</a>\
            {{/list}}\
            {{#if (end < total-1)}}\
             <i>...</i>\
            {{/if}}\
           <a href='javascript:;' on-click={{this.nav(total)}} class={{current==total? 'z-crt':''}}>{{total}}</a>\
          {{#else}}\
            {{#list 1..total as i}}\
              <a href='javascript:;' on-click={{ this.nav(i)}}  class={{current==i? 'z-crt': ''}}>{{i}}</a>\
            {{/list}}\
          {{/if}}\
        <a href='javascript:;' on-click={{this.nav(current + 1)}}  class='pagenxt {{current == total? \"z-dis\": \"\"}}'>下一页</a>\
      </div>",
    // before init
    config: function(data){
      var count =  5;
      var show = data.show = Math.floor( count/2 );
      data.current = data.current || 1;
      data.total = data.total || 1;

      this.$watch(['current', 'total'], function( current, total ){
        data.begin = current - show;
        data.end = current + show;
        if(data.begin < 2) data.begin = 2;
        if(data.end > data.total-1) data.end = data.total-1;
        if(current-data.begin <= 1) data.end = data.end + show + data.begin- current;
       ...

CSS

.m-page{margin:10px 0 0;text-align:center;line-height:32px;font-size:0;letter-spacing:-0.307em;*letter-spacing:normal;*word-spacing:-1px;word-wrap:normal;white-space:nowrap;color:#999;}
.m-page a,.m-page i{display:inline-block;*display:inline;*zoom:1;vertical-align:top;padding:0 12px;margin-left:-1px;border:1px solid #ddd;font-size:12px;letter-spacing:normal;word-spacing:normal;text-shadow:0 1px #fff;background:#fff;-webkit-transition:background-color 0.3s;-moz-transition:background-color 0.3s;-ms-transition:background-color 0.3s;transition:background-color 0.3s;}
.m-page a,.m-page a:hover{text-decoration:none;color:#39c;}
.m-page a.first{margin-left:0;border-top-left-radius:5px;border-bottom-left-radius:5px;}
.m-page a.last{margin-right:0;border-top-right-radius:5px;border-bottom-right-radius:5px;}
.m-page a .pagearr{font-weight:bold;font-family:\5b8b\4f53;vertical-align:top;*vertical-align:middle;}
.m-page a.pageprv .pagearr{margin-right:3px;}
.m-page a.pagenxt .pagearr{margin-left:3px;}
.m-page a:hover{background:#f5f5f5;}
.m-page a:active{background:#f0f0f0;}
.m-page a.z-crt,.m-page a.z-crt:hover,.m-page a.z-crt:active{cursor:default;color:#999;background:#f5f5f5;}
.m-page a.z-dis,.m-page a.z-dis:hover,.m-page a.z-dis:active{cursor:default;color:#ccc;background:#fff;}

JavaScript

// insert
    var pager = new Pager({data: {total: 100, current:20}}).inject('#bind1');
    var pager2 = new Pager({data: {total: 50, current:2}}).inject('#bind1');

    var pager3 = new Pager({data: {total: 100, current:20}}).inject('#bind2');
    var pager4 = new Pager({data: {total: 50, current:2}}).inject('#bind2');

    var pager5 = new Pager({data: {total: 100, current:2}}).inject('#bind3');
    var pager6 = new Pager({data: {total: 50, current:20}}).inject('#bind3');


    // style 1
    pager.$bind(pager2, ['current', 'total']);


    // style 2
    pager3.$bind(pager4, 'current', 'current')
    pager3.$bind(pager4, 'total')

    // style 3
    pager5.$bind(pager6, {current: "current", total: "total"});


    // bind chain
    var pager = new Pager({data:{total: 1000, current:1}}).inject('#bind_chain');
    for(var i = 0; i < 10; i++){
      var pager = new Pager({data:{total: 1000, current:1}})
        .$bind(pager, ['total', 'current'])
        .inject('#bind_chain');
    }