js简单分页,可用
2016-05-20 16:49
344 查看
//翻页调用 var pageSize = 1; var counts = 1; var current_page = 1; var rows,total; search(); //查询所有 function search(){ current_page = 1; $.ajax({ type: "POST", url: "findList", data: {name : $('#searchname').val()}, success: function(data){ total = data.length; counts = Math.ceil(total/pageSize); counts = counts == 0 ? 1 : counts; rows = data; PageCallback(); } }); } function PageCallback(){ $("#Result").text(""); $("#pagecount").text("1/1"); var flag = current_page*pageSize; for(var i=(current_page-1)*pageSize;i<(flag>total?total:flag);i++) { var v = rows[i]; parentnode = v.parentnode == null ? '' : v.parentnode; parentName = v.parentName == null ? '' : v.parentName; description = v.description == null ? '' : v.description; var html = "<tr>"; html += "<td align='center' valign='middle'>" + v.id + "</td>"; html += "<td align='center' valign='middle'>" + v.name + "</td>"; html += "<td align='center' valign='middle'>" + v.organizationId + "</td>"; html += "<td align='center' valign='middle'>" + v.description + "</td>"; html += "<td align='right' valign='middle'>"; html += "<a class='yichu' href='javascript:void(0)' onclick=edit('"; html += v.id + "','" + v.name + "','" + v.isroot + "','" + parentnode + "','" + parentName + "','" + v.status + "','" + description ; html += "'); >查看/修改</a>"; var zTree = $.fn.zTree.getZTreeObj("orgTree"); html += "<a class='yichu' href='javascript:void(0)' onclick=del('" + v.id + "'); >删除</a></td>"; html += "</tr>"; $("#Result").append(html); } $("#pagecount").text(current_page + "/" + counts ); } //上一页 function prePage(){ if(current_page == 1) return; current_page--; PageCallback(); } //下一页 function nextPage(){ if(current_page == counts) return; current_page ++; PageCallback(); } jsp如下: <div class="user_query" style="margin-top: 15px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <thead> <tr class="title"> <td width="7%" align="center" valign="middle">组织编号</td> <td width="13%" align="center" valign="middle">组织名称</td> <td width="22%" align="center" valign="middle">层级标识</td> <td width="21%" align="center" valign="middle">说明</td> <td width="37%" align="right" valign="middle" class="user_join"><a href="javascript:void(0)" onclick="add();">添加组织</a></td> </tr> </thead> <tbody id="Result"> </tbody> </table> </div> <div class="users_fanye"> <ul> <li class="nex" onclick="prePage();">上一页</li> <li class="nex" id="pagecount">1/1</li> <!-- <li class="nex">2/2</li> --> <li class="nex" onclick="nextPage();">下一页</li> </ul> </div>
相关文章推荐
- JavaScript中的Object对象学习教程
- chart.js 入门&&highcharts 入门(推荐使用highcharts)
- Js中动态创建Json,动态为Json添加属性、属性值
- NW.js and Electron compared
- Javascript(JS)对Cookie的读取、删除、写入操作帮助方法
- jsp中文乱码问题
- 【转】js写显示农历的日期
- javascript进行数组追加方法小结
- JSP页面固定页面为绝对路径
- JSON的哲学思维
- layer.js 贤心制作的弹出层插件-不仅仅是弹层
- JS笔记
- JavaScript 中的错误处理。
- 常用正则表达式大全,手机、电话、邮箱、身份证(最严格的验证)、IP地址、网址、日期等,一般前台js验证
- javascript改变input radio的样式
- 基于CSS和JavaScript创建动画式谷歌地图标记
- js根据IP地址判断城市
- [置顶] js jq队列动画分析
- OC与JS交互-二
- javascript dom 获取样式属性值