javascript - 仅显示前 10 里，然后显示下一个按钮或输入值

Question

<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>

在帮助代码的帮助下，代码已经走到这一步，但无法正常工作。所以此时我需要我的 next 和 prev 按钮在前 10 个 li 项目和最后 10 个 10 x 10 之间切换，输入字段工作如第 Nth 10 所示。我将在给另一个脚本的给定值输入的页面中有太多 li 标签。因此，如果有一种方法可以强制页面仅加载显示的 li 项目，那将非常有帮助。试过http://jsfiddle.net/uXn2p/1/但它对我的情况并不是很有用。加载所有内容并且在到达最后一个移动的 View 区域后不会停止。

Answer 1

在列表上创建事件 (pageChanged.pager) 以处理页码的更改。适本地更改页码，当单击按钮或更改输入的值时，并触发该事件。

更新:http://jsfiddle.net/vittore/uXn2p/104/更新 2:使用自定义事件参数删除了重复代码

注意:我使用了自定义事件，以简化代码并允许应用程序的任何部分触发更改的页面。 ajax请求完成后说。此外，使用命名空间通常是一种很好的做法，因此如果您需要销毁寻呼机，您可以执行类似 $('*').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])