Pager для ваших JS-страниц

[Maslakoff]

Пришлось работать с CMS, которая выдает данные в виде JS-массива, а уже с ними приходится работать через JS на странице...

Задача была поставлена сделать по страничную разбивку данных.

И что бы код не пропадал просто так, решил разместить его здесь.

Следующий объект реализует по страничную разбивку JS данных, с возможностью использования нав-бара

var pager = {
	data: [],
	onPage: 5,
	nowPage: 0,

	init: function(){
		this.data = [];
		this.onPage = 5;

		var parsedURL = new Array();

		var sURL = location.search.substring(1).split('&');

		for(var i=0; i<sURL.length; i++){
			var one = sURL[i].split('=');

			if(one[0] == 'page'){
				this.nowPage = one[1];
			}
		}
	},

	setNewsLine: function( arr ){
		for( var i=0; i<arr.length/5; i++ ){
			this.data.push({
				url: arr[5*i],
				title: arr[5*i+1],
				summary: arr[5*i+2],
				image: arr[5*i+3],
				time: arr[5*i+4]
			});
		}
	},

	setData: function( arr ){
		this.data = arr;
	},

	setOnPage: function( num ){
		this.onPage = num;
	},

	getPage: function( page_num ){
		if( this.data.length < this.onPage ){
			this.onPage = this.data.length;
		}

		var start = page_num * this.onPage;
		var end = page_num * this.onPage + this.onPage;

		if( start > this.data.length ){
			start = 0;
			end = this.onPage;
		}

		if(end > this.data.length){
			end = this.data.length;
		}

		var ret = new Array();

		while( start < end ){
			ret.push(this.data[start]);
			start++;
		}

		return ret;
	},

	getNowPageData: function(){
		return this.getPage( this.nowPage );
	},

	getNavLine: function(){
		var pages_count = Math.floor( this.data.length / this.onPage );

		var ret = '<ul>';

		for( var i=0; i<pages_count; i++ ){
			if( i != this.nowPage ){
				ret += '<li><a href="?page=' + i + '">' + (i+1) + '</a></li>';
			}else{
				ret += '<li class="now"><span>' + (i+1) + '</span></li>';
			}
		}

		ret += '</ul>';

		return ret;
	}
}

Как пользовать?

К примеру данные у нас в таком виде:

var Data = [
{name:'Имя1', secondname: 'Фамилия1'},
{name:'Имя2', secondname: 'Фамилия2'},
{name:'Имя3', secondname: 'Фамилия3'},
{name:'Имя4', secondname: 'Фамилия4'},
{name:'Имя5', secondname: 'Фамилия5'},
{name:'Имя6', secondname: 'Фамилия6'},
{name:'Имя7', secondname: 'Фамилия7'},
{name:'Имя8', secondname: 'Фамилия8'},
{name:'Имя9', secondname: 'Фамилия9'}
 ];

Инициализируем объект и передаем в него массив:

pager.init();

pager.setData(Data);

Затем получаем все данные, которые принадлежат текущей странице:

var Peoples = pager.getNowPageData();

Выводим данные циклом, затем выводим нав-бар:

for(var i=0; i<Peoples.length; i++){
	document.write('<p><b>'+Peoples[i].name+'</b> '+Peoples[i].secondname+'</p>');
}

document.write(pager.getNavLine());

Этот скрипт может послужить наглядным примером работы со страницами в других языках программирования.

Пример для CMS M1 Webcontent(вывод ленты новостей)

pager.init();

pager.setNewsLine(E_JavaScript);

var news = pager.getNowPageData();

var month = new Array("Января","Февраля","Марта","Апреля","Мая","Июня","Июля","Августа","Сентября","Октября","Ноября","Декабря");

for(var i=0; i<news.length; i++){
	var d = new Date();
	d.setTime(news[i].time);
	var date = d.getDate() + ' ' + month[d.getUTCMonth()] + ' ' + d.getFullYear();
	document.write('<p><b>'+date+'</b> '+news[i].title+'</p>');
}

document.write(pager.getNavLine());