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个10之间切换，输入字段工作显示为Nth 10。我将在给定值输入的页面中有太多li标签到另一个脚本。所以如果有办法强制页面只加载显示的li项目，它将真正有用。试过http://jsfiddle.net/uXn2p/1/，但它对我的情况并没有多大帮助。加载所有内容，而不是在到达最后一个正在移动的视图区域后停止。

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

仅显示前10个li，然后使用按钮或输入值显示

1 个答案: