JS(JQ)分页 个人查看,没注释
前端表格
1 <table cellpadding="3" cellspacing="1" class="excel-table"> 2 <tr> 3 <th>会员电话</th> 4 <th>会员名称</th> 5 <th>会员绘本数量</th> 6 <th>操作</th> 7 </tr> 8 {foreach from=$userList item=vo} 9 <tr class="trs"> 10 <td>{$vo.mobile_phone}</td> 11 <td>{$vo.user_name2}</td> 12 <td> 13 <input class="user-huiben" name="user_huiben[{$vo.user_id}]" value="{$vo.user_huiben}" maxValue="{$vo.user_huiben}"> 14 </td> 15 <td> 16 <img class="remove-tr" src="images/icon_trash.gif" width="21" height="21" border="0" style="cursor: pointer;" title="此会员不代捐"> 17 </td> 18 </tr> 19 {/foreach} 20 </table>
JS
1 document.onkeydown = function () { 2 if (window.event && window.event.keyCode == 13) { 3 window.event.returnValue = false; 4 } 5 } 6 $(function(){ 7 console.log($('.trs').length); 8 trs = ''; 9 pagePre = ''; 10 pageNext = ''; 11 pageSel = ''; 12 pageQ = ''; 13 removeTr = $('.remove-tr'); 14 curPage = 1; 15 pageSize = 10; 16 maxPage = 1; 17 pageBox = $('#turn-page'); 18 $('.user-huiben').change(function(){ 19 var x = $(this).val(); 20 var y = parseInt($(this).attr('maxvalue')); 21 x = x<1?0:x; 22 x = x>y?y:x; 23 $(this).val(x); 24 }); 25 removeTr.click(function(){ 26 if(confirm('此会员这次不代捐吗?')){ 27 $(this).parents('.trs').remove(); 28 initPage(); 29 } 30 }); 31 function changePage(page){ 32 page = parseInt(page); 33 page = (page<1)?1:page; 34 curPage = (page>maxPage)?maxPage:page; 35 showStart = (curPage-1)*pageSize; 36 trs.hide(); 37 $('.trs:eq('+showStart+')').show(); 38 $('.trs:gt('+showStart+'):lt('+(pageSize-1)+')').show(); 39 40 var str = '总共'+$('.trs').length+'条记录,每页总共<input class="page-q" value="'+pageSize+'" size="4">条记录 当前为第'+curPage+'/'+maxPage+'页,'; 41 str += '<span class="page-pre">上一页</span>'; 42 str += '<span class="page-next">下一页</span>'; 43 var strSelect = '<select class="page-sel">'; 44 for(var i = 1;i<=maxPage;i++){ 45 if(i == curPage){ 46 strSelect += '<option value="'+i+'" selected="selected">'+i+'</option>'; 47 }else{ 48 strSelect += '<option value="'+i+'">'+i+'</option>'; 49 } 50 } 51 str += strSelect; 52 pageBox.html(str); 53 if(pagePre != ''){ 54 pagePre.unbind(); 55 } 56 if(pageNext != ''){ 57 pageNext.unbind(); 58 } 59 if(pageSel != ''){ 60 pageSel.unbind(); 61 } 62 if(pageQ != ''){ 63 pageQ.unbind(); 64 } 65 pagePre = $('.page-pre'); 66 pageNext = $('.page-next'); 67 pageSel = $('.page-sel'); 68 pageQ = $('.page-q'); 69 pagePre.bind('click',function(){ 70 changePage(curPage-1); 71 }); 72 pageNext.bind('click',function(){ 73 changePage(curPage+1); 74 }); 75 pageSel.bind('change',function(){ 76 changePage($(this).val()); 77 }); 78 pageQ.bind('change',function(){ 79 var x= parseInt($(this).val()); 80 if(x<1){ 81 return false; 82 }else{ 83 pageSize = x; 84 curPage = 1; 85 curPage = 1; 86 initPage(); 87 } 88 }); 89 } 90 function initPage(){ 91 trs = $('.trs'); 92 maxPage = Math.ceil(trs.length/pageSize); 93 changePage(curPage); 94 } 95 initPage(); 96 });