vadim8kiselev/code.js

## code.js
var SITE = (function() {
    var $form = $('#ajax-form'),
        $tbody = $('tbody'),
        $page = $('.page'),
        $input = $('.input'),
        $prev = $('.prev'),
        $next = $('.next'),
        pageSize = 10,
        from = 0,
        to = 0

    function call() {
        var parameters = $form.serialize()
        load(parameters)
    }

    function load(parameters) {
        $.ajax({
            type: 'GET',
            url: 'http://demo.webility.ru/api',
            async: true,
            data: parameters,
            success: function (data) {
                updateView(data)
            },
            error: function (error) {
                alert('An error has occurred: ' + error.responseCode)
            }
        });
    }

    function updateView(data) {
		from = data.meta.from
		to = from + pageSize

        updateMetaInformation(data.meta)
        updateButtons(data.meta)
        updateDataTable(data.data)
    }

    function updateMetaInformation(meta) {
        $page.empty();
        $page.text('Shown '
            + (meta.length === 0 ? 0 : from + 1)
            + ' - '
            + (from + 9 <= meta.length ? from + pageSize : meta.length)
            + ' of '
            + meta.length);
    }

    function updateButtons(meta) {
        $prev.toggle(meta.from > 0)
        $next.toggle(meta.from + 10 < meta.length)
    }

    function updateDataTable(data) {
        $tbody.empty()

        var array = [];
        for (var i = 0; i < data.length; i++) {
            var element = document.createElement('tr')
            var name = document.createElement('td')
            var number = document.createElement('td')

            name.innerHTML = data[i].name
            number.innerHTML = data[i].episodes

            element.appendChild(name)
            element.appendChild(number)

            array.push(element.outerHTML)
        }
        $tbody.append(array.join(''))
    }

    function nextPage(from, filter) {
        $input.val(filter)
        var url = 'from=' + from + (filter === '' ? '' : '&q=' + filter)
        load(url)
    }

    function getTargetPageValue(next) {
        return next ? to : (from - pageSize)
    }

    return {
        initialize: function() {
            // Pre upload data
            call();

            // Override form submit
            $form.submit(function() {
                call();
                return false;
            })

            // Add click listeners to buttons
            $('.next').click(function() {
			console.log(getTargetPageValue(true))
                nextPage(getTargetPageValue(true), $input.val())
            })

            $('.prev').click(function() {
			console.log(getTargetPageValue(false))
                nextPage(getTargetPageValue(false), $input.val())
            })
        }
    }
}());

$(document).ready(function () {
    SITE.initialize()
});

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>First task: AJAX</title>
        <link type="text/css" rel="stylesheet" href="../css/style.css">
    </head>
    <body>
        <div class="background">
            <div class="content">
                <h1 class="header">Heroes</h1>
                <form id="ajax-form" method="get">
                    <div class="header-menu">
                        <input title="input" class="input" name="q" type="text">
                        <button class="button" type="submit">Go</button>
                        <span class="page"></span>
                    </div>
                </form>
                <table class="data-table">
                    <thead>
                    <tr>
                        <th class="column column-one">Name</th>
                        <th class="column column-two">Episodes</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <div class="footer-button">
                    <span class="next">Next →</span>
                    <span class="prev">← Previous</span>
                </div>
            </div>
        </div>
        <script src="http://code.jquery.com/jquery-1.8.3.js" defer></script>
        <script src="../js/code.js" defer></script>
    </body>
</html>

## style.css
body {
    background-color: #eaeaea;
    font-family: Arial, serif;
}

td, th {
    height: 20px;
}

.background {
    width: 100%;
    height: 100%;
}

.content {
    width: 600px;
    padding: 15px;
    margin: auto;
}

.column {
    text-align: left;
    font-size: 17px;
}

.column-one {
    width: 70%;
}

.column-two {
    width: 30%;
}

.page {
    float: right;
}
.data-table {
    width: 570px;
}

.prev {
    text-align: left;
}

.prev:hover {
    cursor: pointer;
    color: grey;
    text-decoration: underline;
}

.next {
    float: right;
}

.next:hover {
    cursor: pointer;
    color: grey;
    text-decoration: underline;
}

.header-menu {
    margin-bottom: 10px;
}

.footer-button {
    margin-top: 10px;
}
	var SITE = (function() {
	var $form = $('#ajax-form'),
	$tbody = $('tbody'),
	$page = $('.page'),
	$input = $('.input'),
	$prev = $('.prev'),
	$next = $('.next'),
	pageSize = 10,
	from = 0,
	to = 0

	function call() {
	var parameters = $form.serialize()
	load(parameters)
	}

	function load(parameters) {
	$.ajax({
	type: 'GET',
	url: 'http://demo.webility.ru/api',
	async: true,
	data: parameters,
	success: function (data) {
	updateView(data)
	},
	error: function (error) {
	alert('An error has occurred: ' + error.responseCode)
	}
	});
	}

	function updateView(data) {
	from = data.meta.from
	to = from + pageSize

	updateMetaInformation(data.meta)
	updateButtons(data.meta)
	updateDataTable(data.data)
	}

	function updateMetaInformation(meta) {
	$page.empty();
	$page.text('Shown '
	+ (meta.length === 0 ? 0 : from + 1)
	+ ' - '
	+ (from + 9 <= meta.length ? from + pageSize : meta.length)
	+ ' of '
	+ meta.length);
	}

	function updateButtons(meta) {
	$prev.toggle(meta.from > 0)
	$next.toggle(meta.from + 10 < meta.length)
	}

	function updateDataTable(data) {
	$tbody.empty()

	var array = [];
	for (var i = 0; i < data.length; i++) {
	var element = document.createElement('tr')
	var name = document.createElement('td')
	var number = document.createElement('td')

	name.innerHTML = data[i].name
	number.innerHTML = data[i].episodes

	element.appendChild(name)
	element.appendChild(number)

	array.push(element.outerHTML)
	}
	$tbody.append(array.join(''))
	}

	function nextPage(from, filter) {
	$input.val(filter)
	var url = 'from=' + from + (filter === '' ? '' : '&q=' + filter)
	load(url)
	}

	function getTargetPageValue(next) {
	return next ? to : (from - pageSize)
	}

	return {
	initialize: function() {
	// Pre upload data
	call();

	// Override form submit
	$form.submit(function() {
	call();
	return false;
	})

	// Add click listeners to buttons
	$('.next').click(function() {
	console.log(getTargetPageValue(true))
	nextPage(getTargetPageValue(true), $input.val())
	})

	$('.prev').click(function() {
	console.log(getTargetPageValue(false))
	nextPage(getTargetPageValue(false), $input.val())
	})
	}
	}
	}());

	$(document).ready(function () {
	SITE.initialize()
	});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>First task: AJAX</title>
	<link type="text/css" rel="stylesheet" href="../css/style.css">
	</head>
	<body>
	<div class="background">
	<div class="content">
	<h1 class="header">Heroes</h1>
	<form id="ajax-form" method="get">
	<div class="header-menu">
	<input title="input" class="input" name="q" type="text">
	<button class="button" type="submit">Go</button>
	<span class="page"></span>
	</div>
	</form>
	<table class="data-table">
	<thead>
	<tr>
	<th class="column column-one">Name</th>
	<th class="column column-two">Episodes</th>
	</tr>
	</thead>
	<tbody>
	</tbody>
	</table>
	<div class="footer-button">
	<span class="next">Next →</span>
	<span class="prev">← Previous</span>
	</div>
	</div>
	</div>
	<script src="http://code.jquery.com/jquery-1.8.3.js" defer></script>
	<script src="../js/code.js" defer></script>
	</body>
	</html>
	body {
	background-color: #eaeaea;
	font-family: Arial, serif;
	}

	td, th {
	height: 20px;
	}

	.background {
	width: 100%;
	height: 100%;
	}

	.content {
	width: 600px;
	padding: 15px;
	margin: auto;
	}

	.column {
	text-align: left;
	font-size: 17px;
	}

	.column-one {
	width: 70%;
	}

	.column-two {
	width: 30%;
	}

	.page {
	float: right;
	}
	.data-table {
	width: 570px;
	}

	.prev {
	text-align: left;
	}

	.prev:hover {
	cursor: pointer;
	color: grey;
	text-decoration: underline;
	}

	.next {
	float: right;
	}

	.next:hover {
	cursor: pointer;
	color: grey;
	text-decoration: underline;
	}

	.header-menu {
	margin-bottom: 10px;
	}

	.footer-button {
	margin-top: 10px;
	}