Js用于填充表格,和用于分页的功能。

前台中用于显示数据的表和分页的模块是:

 <table width="100%" class="maintable" cellpadding="0" cellspacing="1" border="0"
                                    id="dataTb">
                                    <tr align="center">
                                        <td class="title" style="width: 15%; text-align: center;">
                                            编辑
                                        </td>
                                        <td class="title" style="width: 10%; text-align: center;">
                                            编号
                                        </td>
                                        <td class="title" style="width: 10%; text-align: center;">
                                            日期
                                        </td>
                                        <td class="title" style="width: 15%; text-align: center;">
                                            值班干部
                                        </td>
                                        <td class="title" style="width: 20%; text-align: center;">
                                            飞行单位
                                        </td>
                                        <td class="title" style="width: 20%; text-align: center;">
                                            鸟情状况
                                        </td>
                                        <td class="title" style="width: 20%; text-align: center;">
                                            驱鸟效果
                                        </td>
                                    </tr>
                                </table>
                                <!--分页显示模块-->
                                <table width="100%" class="maintable" cellpadding="0" cellspacing="1" border="0"
                                    id="pageTb">
                                </table>

其中的JS代码为:

/* ------------------------------------- 分页模块(编辑,删除) ------------------------------------- */
    function pager(page, maxPage, total, per, countsIsVisible,key,colum,tableType,utilUrl,editUrl)//分页的辅助方法
    {          
                //(请求的当前页,最大页数,总信息量,页的大小,详细分页信息是否可见,"关键字的<input/>ID",数据的列数,"字典表类型","后台处理类URL","添加或修改页面")
           
     var first  = "<font style='font-size:12px'>首页</font>";
     var previous = "<font style='font-size:12px'>上一页</font>";
     var next  = "<font style='font-size:12px'>下一页</font>";
     var last  = "<font style='font-size:12px'>尾页</font>";

     var s = "<div id='pagerDiv' class='pager-block' style='width:100%;text-align:right'><div class='pager-links' style='float:left; text-align:left; font-family:courier new,sans-serif'>";
    
     //判断当前页是否是第一页,从而控制显示方式
     if (page == 1)
     {
      s += (first + " " + previous + " <b>");
     }
     else 
     {
      if (first != "") s += ("<a href='javascript:getPageList(1,/""+key+"/","+colum+",/""+tableType+"/",/""+utilUrl+"/",/""+editUrl+"/")'>" + first + "</a> ");
      s += ("<a href='javascript:getPageList("+(page-1)+",/""+key+"/","+colum+",/""+tableType+"/",/""+utilUrl+"/",/""+editUrl+"/")'>" + previous + "</a> <b>");
     }

        //判断:当总页数多于6页时,省略中间页码,只显示第一页和最后一页
     var j = (page-5 < 1) ? 1 : page-5;
     var k = (page+5 > maxPage) ? maxPage : page+5;
     //显示第一页
        if (j > 1) s += " <a href='javascript:getPageList(1,/""+key+"/","+colum+",/""+tableType+"/",/""+utilUrl+"/",/""+editUrl+"/")'>1</a> ... ";
        //显示中间页码
     for (var i=j; i<k+1; i++)
     {
      if (page == i)
      {
       s += ("<span class='t2'>" + i + "</span> ");
       continue;
      }
      s += ("<a href='javascript:getPageList("+i+",/""+key+"/","+colum+",/""+tableType+"/",/""+utilUrl+"/",/""+editUrl+"/")'>" + i + "</a> ");//{a:'caption'};
     }
     //显示最后一页
     if (maxPage > k) s += " ... <a href='javascript:getPageList("+maxPage+",/""+key+"/","+colum+",/""+tableType+"/",/""+utilUrl+"/",/""+editUrl+"/")'>" + maxPage + "</a> ";
     //判断当前页是否是最后一页,从而控制显示方式
     if (page == maxPage)
     {
      s += ("</b>" + next + " " + last);
     }
     else
     {
      s += ("</b><a href='javascript:getPageList("+(page+1)+",/""+key+"/","+colum+",/""+tableType+"/",/""+utilUrl+"/",/""+editUrl+"/")'>" + next + "</a> ");
     
      if (last != "") s += ("<a href='javascript:getPageList("+maxPage+",/""+key+"/","+colum+",/""+tableType+"/",/""+utilUrl+"/",/""+editUrl+"/")'>" + last + "</a>");
     }
     //根据输入的页号,直接显示该页数据
     s += " 转到 <input type='text'id='gotopage' name='gotopage' value='" + page + "' size='3' /> <input type='button' class='button' value='Go' style='height:19px;' οnclick='ongoto(/""+key+"/","+colum+",/""+tableType+"/",/""+utilUrl+"/",/""+editUrl+"/")' />";
     s += ("</div>");
     
     //控制“总记录”“每页”“总页数”的显示
     if (countsIsVisible)
     {
      s += ("<div class='pager-stat' style='float:lift;'>");
      s += ("总记录:<span class='t2'>" + total + "</span> ");
      s += ("每页:<span class='t2'>" + per + "</span> ");
      s += ("总页数:<span class='t2'>" + maxPage + "</span></div>");
     }
     s += "</div>";

     return s;
    }
    function ongoto(key,colum,tableType,utilUrl,editUrl)//直接跳转到设定好的某一页
    {
     var page = document.getElementById("gotopage").value;
     getPageList(page,key,colum,tableType,utilUrl,editUrl);
    }
   
    function del(id,utilUrl,editUrl,key,colum,tableType)//删除一条数据(id,"后台处理类","编辑页面","关键字的<input/>ID",数据列数,"字典表类型")
     {
        if (confirm("你确认要删除编号为" + id + "的数据吗?"))
        {
           $.ajax({
            url: utilUrl,
            type: 'POST',
            data:"id="+id+"&operationType="+3+"&tableType="+tableType,
            dataType: 'json',
            timeout: 1000,
            error: function(data){alert(data.result);},
            success: function(data)
            {
              alert( data.result);
            }
           
        });
         getPageList(document.getElementById("gotopage").value,key,colum,tableType,utilUrl,editUrl);
        }
     }
     /* ------------------------------------- 查询,并返回分页信息(注意页面的命名规则,dataTb,pageTb分别是存放数据和存放分页信息的Table) ------------------------------------- */
     
    function removeAll()   //清空容器中已经存在的数据(注意页面中的容器的命名规则)
    {  
        var t =   document.getElementById("dataTb");//数据容器
        var pageTb = document.getElementById("pageTb");//分页信息容器

        for(var i=t.rows.length-1;i>=1;i--)  
        {  
            t.deleteRow(i);  
        }  
         for(var j=pageTb.rows.length-1;j>=0;j--)  
        {  
            pageTb.deleteRow(0);  
        } 
    } 
    
     function getPageList(pageIndex,keyInputId,colum,tableType,utilUrl,editUrl)//获取含有删除,修改功能的分页数据(当前请求的页码,关键字(以逗号分隔),数据的列数,"数据库表的类型","后台处理类URL","编辑页面")
    {    
        var operationType = 1;//操作类型
        var pdata = "operationType="+operationType+"&pageIndex="+pageIndex+"&tableType="+tableType;
       
        var xx = keyInputId.split(",");//获得关键字的数组
        for(var i in xx)
        {
            var keyi =xx[i];
            pdata+="&"+keyi+"="+document.getElementById(keyi).value;
        }
       
        $.ajax({
            url: utilUrl,//后台处理类
            type: "POST",
            data:pdata,
            dataType: "json",
            timeout: 1000,
            error: function(data){alert("出现错误或者您没有权限!");},
            success: function(data)
            {
                removeAll();//首先清空网页中已经存在的历史数据
               
                if(data.result!=null)//后台出现错误,返回的是"{result:'查询失败'}",则提示错误信息
                {
                    alert(data.result);
                }
                else
                {
                    if(data.total==0)//如果返回的数据数为0
                    {
                       alert("您所要查询的数据不存在!");
                    }
                    else
                    {
                        var table = document.getElementById("dataTb");//获得显示数据的容器
                        var cell,row;
                        var width = window.screen.availWidth;
                        var height = window.screen.availHeight;
                        var iRow;
                         //在容器中输出数据
                        for (iRow=0;iRow<data.rows.length;iRow++)
                        {
                            row=table.insertRow(iRow+1);
                            row.setAttribute("onmouseover","this.className='highlight'");
                            row.setAttribute("onmouseout","this.className=''");
                           
                            for (var iCell=0; iCell<colum+1; iCell ++)
                            {
                                cell=row.insertCell(iCell);
                               
                                if(iCell == 0)
                                {  
                                    id=data.rows[iRow].cell[0];
                                    cell.innerHTML = "<a οnclick=/"javascript:GB_myShow('编辑','"+editUrl+"?tableType="+tableType+"&operationType=4&id="+id+"');/" href='javascript:void(0) '>编辑</a>|<a href='javascript:del(/""+id+"/",/""+utilUrl+"/",/""+editUrl+"/",/""+keyInputId+"/","+colum+",/""+tableType+"/")'>删除</a>";
                                    cell.setAttribute("align","center");
                                    continue;
                                }
                               
                                cell.setAttribute("align","center");
                                cell.appendChild(document.createTextNode(data.rows[iRow].cell[iCell-1]));
                             
                                cell=null;
                            }
                            row=null;
                        } 
                       
                        var pageTable = document.getElementById("pageTb");//获得分页模块的容器
                        var pageIndex = data.page;//从后台获取索引页号
                        var total = data.total;//从后台获取总的数据量
                        var pageSize = 10;//页的大小
                        var maxPage =0;//最大页
                        if(total%pageSize==0)//计算最大页数
                        {
                             maxPage =Math.floor(total/pageSize);
                        }
                        else
                        {
                             maxPage =Math.floor(total/pageSize)+1;
                        }
                       
                        //输出分页模块
                        if(data.rows.length!=0)
                        {
                            row1=pageTable.insertRow(0);
                            cell=row1.insertCell(0);
                            row1.setAttribute("colspan","11");
                            //调用pager获得分页模块,并从容器中输出
                            cell.innerHTML = pager(pageIndex ,maxPage,total,pageSize, true,keyInputId,colum,tableType,utilUrl,editUrl);
                        }
                     }
                 }
            }
        });

    }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值