您的位置:首页 > Web前端 > JavaScript

JS(JQ)分页 个人查看,没注释

2015-10-30 11:51 399 查看
前端表格

<table cellpadding="3" cellspacing="1" class="excel-table">
  <tr>
  <th>会员电话</th>
  <th>会员名称</th>
<th>会员绘本数量</th>
    <th>操作</th>
 </tr>
 {foreach from=$userList item=vo}
  <tr class="trs">
  <td>{$vo.mobile_phone}</td>
  <td>{$vo.user_name2}</td>
  <td>
  <input class="user-huiben" name="user_huiben[{$vo.user_id}]" value="{$vo.user_huiben}" maxValue="{$vo.user_huiben}">
  </td>
  <td>
    <img class="remove-tr" src="images/icon_trash.gif" width="21" height="21" border="0" style="cursor: pointer;" title="此会员不代捐">
  </td>
    </tr>
  {/foreach}
</table>


JS

document.onkeydown = function () {
if (window.event && window.event.keyCode == 13) {
window.event.returnValue = false;
}
}
$(function(){
console.log($('.trs').length);
trs = '';
pagePre = '';
pageNext = '';
pageSel = '';
pageQ = '';
removeTr = $('.remove-tr');
curPage = 1;
pageSize = 10;
maxPage = 1;
pageBox = $('#turn-page');
$('.user-huiben').change(function(){
var x = $(this).val();
var y =    parseInt($(this).attr('maxvalue'));
x = x<1?0:x;
x = x>y?y:x;
$(this).val(x);
});
removeTr.click(function(){
if(confirm('此会员这次不代捐吗?')){
$(this).parents('.trs').remove();
initPage();
}
});
function changePage(page){
page = parseInt(page);
page = (page<1)?1:page;
curPage = (page>maxPage)?maxPage:page;
showStart = (curPage-1)*pageSize;
trs.hide();
$('.trs:eq('+showStart+')').show();
$('.trs:gt('+showStart+'):lt('+(pageSize-1)+')').show();

var str = '总共'+$('.trs').length+'条记录,每页总共<input class="page-q" value="'+pageSize+'" size="4">条记录 当前为第'+curPage+'/'+maxPage+'页,';
str += '<span class="page-pre">上一页</span>';
str += '<span class="page-next">下一页</span>';
var strSelect = '<select class="page-sel">';
for(var i = 1;i<=maxPage;i++){
if(i == curPage){
strSelect += '<option value="'+i+'"  selected="selected">'+i+'</option>';
}else{
strSelect += '<option value="'+i+'">'+i+'</option>';
}
}
str += strSelect;
pageBox.html(str);
if(pagePre != ''){
pagePre.unbind();
}
if(pageNext != ''){
pageNext.unbind();
}
if(pageSel != ''){
pageSel.unbind();
}
if(pageQ != ''){
pageQ.unbind();
}
pagePre = $('.page-pre');
pageNext = $('.page-next');
pageSel = $('.page-sel');
pageQ = $('.page-q');
pagePre.bind('click',function(){
changePage(curPage-1);
});
pageNext.bind('click',function(){
changePage(curPage+1);
});
pageSel.bind('change',function(){
changePage($(this).val());
});
pageQ.bind('change',function(){
var x= parseInt($(this).val());
if(x<1){
return false;
}else{
pageSize = x;
curPage = 1;
curPage = 1;
initPage();
}
});
}
function initPage(){
trs = $('.trs');
maxPage = Math.ceil(trs.length/pageSize);
changePage(curPage);
}
initPage();
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: