zoukankan      html  css  js  c++  java
  • js简单分页,可用

    //翻页调用
        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>
  • 相关阅读:
    模拟信号的优缺点分析
    PLC控制网关的功能介绍及应用领域
    LoRa无线数传终端的优势
    串口服务器厂家哪家好
    串口转以太网转换器的工作模式
    一个能手机控制水泵的无线远程开关控制器
    以太网IO模块是什么
    支持MQTT的模块有哪些
    常用正交表
    Spring Boot源码(五)以HttpEncodingAutoConfiguration【Http 编码自动配置】为例解释自动配置原理
  • 原文地址:https://www.cnblogs.com/zrui-xyu/p/5512696.html
Copyright © 2011-2022 走看看