JS(JQ)分页 个人查看,没注释
2015-10-30 11:51
399 查看
前端表格
JS
<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(); });
相关文章推荐
- JS实现带提示的星级评分效果完整实例
- 仿知乎程序(三)读取webService,解析json,volley以及PullToRefreshListView的使用
- js实现 页面显示系统时间(中文显示星期)、动态倒计时页面跳转
- Javascript内存泄漏
- .net mvc web api 返回 json 内容,过滤值为null的属性
- JS中调用输出中文乱码怎么办?一步轻松解决
- js中Math.random()生成指定范围数值的随机数
- javascript 学习总结(七)String对象
- JavaScript传参的问题
- JS里嵌套HTML需要过滤的正则规则
- 利用require.js实现javascript模块化加载
- Js写法
- 高性能JavaScript(2)之数据存取
- JS 获取时间
- 任意修改网页内容JS代码
- JS URL传中文参数引发的乱码问题
- Javascript模块化编程3:require.js的用法
- Can I use a JavaScript Alert box to show a countdown timer?
- Javascript模块化编程2:AMD规范
- js关闭当前页面比较兼容的办法