New Twiddle

components.page-item.js

import Ember from 'ember';
export default Ember.Component.extend({
	tagName:'li',
	classNames:['page'],
	classNameBindings:['isactive:active','isdotted:dotted'],
	selectedpage:1,
	
	isdotted:Ember.computed.alias('data.dotted'),
	
	isactive:function()
    {	
    	return (this.get('selectedpage') == this.get('data.page_id'));
    }.property('selectedpage'),
    
    click:function()
    {	
    	if(this.get('data.dotted'))
    	{
    		return;
    	}
        this.set('selectedpage', this.get('data.page_id')); //No I18N
    }
});

components.pagination-comp.js

import Ember from 'ember';

export default Ember.Component.extend({
	classNames:['pagination'],
	page: 1,
	size:50,
	step:3,
	
	isnextdisable:function(){
		return this.get('page') == this.get('size');
	}.property('page,size'),
	
	isprevdisable:function(){
		return this.get('page') == 1;
	}.property('page'),
		
	First:function(param)
	{
		var arr=[];
		
		arr.push({page_id:1},{page_id:'...',dotted:true});
		this.set('firstpage',arr);
	},
	
	Add:function(s,f)
	{	
		var arr=[]
		for(var i=s; i<=f; i++)
		{
			arr.push({page_id:i})
		}
		this.set('pages',arr);
	},
	
	Last:function(param)
	{
		var arr=[];
		
		arr.push({page_id:'...', dotted:true},{page_id:this.get('size')});
		this.set('lastpage',arr);
	},
	
	start:function()
	{
		var page = this.get('page');
		var size = this.get('size');
		var step = this.get('step');
		
		this.setProperties({firstpage:[],pages:[],lastpage:[]});
		
		if (size < step * 2 + 6) {
            this.Add(1, size);
        }
        else if (page < step * 2 + 1) {
            this.Add(1, step * 2 + 3);
            this.Last();
        }
        else if (page > size - step * 2) {
            this.First();
            this.Add(size - step * 2 - 2, size);
        }
        else {
            this.First();
            this.Add(page - step, page + step);
            this.Last();
        }
		
	}.observes('page').on('didInsertElement'),
	
	actions: {
		nextPage: function() {
			if(this.get('page')==this.get('size'))
			{	
				return;
			}
		    this.incrementProperty('page');
		},
		
		prevPage: function() {
			if(this.get('page') == 1)
			{
				return;
			}
		    this.decrementProperty('page');
		},
	}
})

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

styles.app.css

ul.pages_con {
  display: inline-block;
  cursor: default;
  white-space: nowrap;
  max-width: calc(100% - 70px);
  overflow: hidden;
  vertical-align: middle;
  padding:0; 
  margin:0
}
.page {
  display: inline-block;
  border: 1px solid #e4e4e4;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 4px;
  font-size: 15px;
  cursor: pointer;
}
.page:hover,
.page.active {
  background-color: #00aac5;
  color: #fff;
  border-color: #00aac5;
}
.page.dotted {
  border-color: transparent;
  cursor: default;
}
.page.dotted:hover {
  background-color: #fff;
  color: #000;
}
.page_nav {
  display: inline-block;
  border: 1px solid #ccc;
  color: #888;
  width: 30px;
  text-align: CENTER;
  height: 25px;
  line-height: 25px;
  cursor: pointer;
  border-radius: 3px;
  vertical-align: middle;
}
.page_nav:hover {
  border-color: #888;
  color: #000;
}
.page_nav.disable:hover {
  border-color: #ccc;
  color: #888;
}
.selected { width:100px; padding:20px; font-size:20px; font-weight:bold; }

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{pagination-comp}}
<br>
<br>
{{outlet}}
<br>
<br>

templates.components.page-item.hbs

{{data.page_id}}

templates.components.pagination-comp.hbs

<span class="page_nav prev {{if isprevdisable 'disable'}}" {{action 'prevPage'}}>&lt;</span>
<ul class="pages_con">
	{{#each firstpage as |item|}}
		{{page-item data=item selectedpage=page}}
	{{/each}}
	{{#each pages as |item|}}
		{{page-item data=item selectedpage=page}}
	{{/each}}
	{{#each lastpage as |item|}}
		{{page-item data=item selectedpage=page}}
	{{/each}}
</ul>
<span class="page_nav next {{if isnextdisable 'disable'}}" {{action 'nextPage' }}>&gt;</span>

<div class="selected">{{page}}</div>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}