Last active
August 29, 2015 14:00
-
-
Save binaryatrocity/8e2970efc1548e169f40 to your computer and use it in GitHub Desktop.
First JS Pagination & Live Search Attempt
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var perPage = 20, | |
data = [[ PUT DATA INTO TEMPLATE HERE ]] | |
lastPage = Math.ceil(data.length/perPage); | |
function minifyPagination() { | |
var current = parseInt($('li.uk-active').attr('page')), | |
min = Math.max(current-3, 1), | |
max = current+3; | |
$('#page_first, #page_last').remove(); | |
$('ul.uk-pagination > li').addClass('uk-hidden'); | |
for(var x = min; x <= max; x++) { | |
$('li#'+x).removeClass('uk-hidden'); | |
} | |
if (min > 1) | |
$('li#'+min).before("<button id='page_first' class='uk-button'><<</button>"); | |
if (max < lastPage) | |
$('li#'+max).after("<button id='page_last' class='uk-button'>>></button>"); | |
$('#page_first').click(function(){ | |
$('li#'+1).click(); | |
}); | |
$('#page_last').click(function(){ | |
$('li#'+lastPage).click(); | |
}); | |
}; | |
$(document).ready(function(){ | |
// Live search of the ladder listings | |
$('.uk-search-field').keyup(function() { | |
var query = $(this).val(); | |
if(query.length > 2) { | |
var temp = $('.uk-active').attr('page'); | |
$('.uk-active').removeClass('uk-active').empty().append('<a>'+temp+'</a>'); | |
$('table > tbody').empty(); | |
data.forEach(function(element, index, array) { | |
if(element.user.search(new RegExp(query, 'i')) != -1) { | |
$('table > tbody').append($('<tr></tr>').append('<td>'+index+'</td><td>'+element.user+'</td><td>'+element.points+'</td>')); | |
} | |
}); | |
} | |
}); | |
// Create pagination buttons | |
for(var i = 1; i <= lastPage; i++) { | |
var button = $('<li page='+i+' id='+i+'></li>').append('<a>'+i+'</a>'); | |
button.on('click', function(){ | |
//get page | |
var z = $(this).attr('page'); | |
// cleanup | |
var temp = $('.uk-active').attr('page'); | |
$('.uk-active').removeClass('uk-active').empty().append('<a>'+temp+'</a>'); | |
$('table > tbody').empty(); | |
$(this).addClass('uk-active').empty().append('<span>'+z+'</span>'); | |
// slice(a, b): a = (n*(x-1))+1, b = n*x where n = perPage and x=curerntPage (skip +1 at end of a for splice) | |
var a = (perPage*(z-1)), | |
b = perPage*z; | |
data.slice(a, b).forEach(function(element, index, array){ | |
$('table > tbody').append($('<tr></tr>').append('<td>'+(a+index+1)+'</td><td>'+element.user+'</td><td>'+element.points+'</td>')); | |
}); | |
}); | |
$('.uk-pagination').append(button); | |
} | |
// When search input is cleared, go back to first page | |
$('.uk-close').on('click', function(){ | |
$('ul.uk-pagination > li').first().click(); | |
}); | |
// Show the first page when we load up | |
$('ul.uk-pagination > li').first().click(); | |
minifyPagination(); | |
$('ul.uk-pagination > li').on('click', function(){ | |
minifyPagination(); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment