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 });
原文地址:https://www.cnblogs.com/lixingbaophp/p/4922883.html