CODEWITHSUNDEEP
javascriptjquery
user3321234
user3321234

Reputation: 47

show only first 10 li and show next then with a button or input value

<ul id="asd">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>

</ul>

<button id="prev" onSubmit="">prev</button>
<input id="page" onSubmit="" />
<button id="more" onSubmit="">next</button>

</div>

<script>
function showPage(page) {
    var listItems = $("#asd li").toArray();
    var start = (10 * page) - 10; // this is if you use page 1
    // var start = (10 * page) // this is if you use page 0
    var showListItems = listItems.splice(start, 10);

    $(listItems).hide();
    $(showListItems).show();
}
</script>

with help code got this far but cant get it work. so at this point i need my next and prev buttons switch between first 10 li item and last 10 10 by 10 and input field work as show Nth 10 . i ll have too many li tags in page entered by given values to another script. so if there is a way to force page to load only shown li items it will really helpfull. Tried http://jsfiddle.net/uXn2p/1/ but its not really usefull for my situation.loads all content and not stoping after reaching last its just moving view area.

Upvotes: 2

Views: 468

Answers (1)

vittore
vittore

Reputation: 17589

Create event (pageChanged.pager) on list to handle change of page number. Change page number appropriately, when buttons are clicked or input's value is changed, and trigger that event.

UPDATED: http://jsfiddle.net/vittore/uXn2p/104/ UPDATED 2: Removed repetitive code by using custom event parameters

NB: I used custom event, in order to simplify the code and allow any part of your application to trigger changed page. Say after ajax request is finished. Also it is generally good practice to use namespaces, so if you need to destroy pager you can do something like $('*').off('.pager')

 var pageSize = 5
 , ul = $('#asd')
 , pages = Math.floor(ul.find('li').length / pageSize)
 , page = 0
 , currentPage = function (i) {
     return page*pageSize <= i && i < (page + 1) * pageSize 
 }

ul.on('pageChanged.pager', function( e , newPage ) {
  page = Math.max(0, Math.min(pages, newPage))
  $('#page').val(page)
  ul.find('li').hide().filter(currentPage).show();      
})

$('#prev').on('click.pager', function(e) {
    ul.trigger('pageChanged.pager', [--page])
})

$('#more').on('click.pager', function(e) {
   ul.trigger('pageChanged.pager', [++page])
})

$('#page').on('blur.pager', function(e) {
    ul.trigger('pageChanged.pager', [ +$(this).val() ])
})

ul.trigger('pageChanged.pager', [0])

Upvotes: 2

Related Questions