完结效果与利益:

 完成效果与利益:
1、有贰个同室叫笔者完结贰个那样的职能如同PHP,在表单中输入数字,然后网页就应时而生相应的数量;假设是PHP的话就总结多了,Jquery达成仍然第一个,就开头狂的尝试,最终依然促成了(知识点:Jquery创设节点、获取表单的值、循环语句)
Jquery代码:

 达成效果与利益:
1、有二个同校叫自个儿实现多个如此的效应就好像PHP,在表单中输入数字,然后网页就应运而生相应的数码;如若是PHP的话就简单多了,Jquery完毕依然第三个,就从头狂的尝试,最终依然促成了(知识点:Jquery创造节点、获取表单的值、循环语句)
Jquery代码:

项目中常常会对表格举办分页,以下运用jquery对客商管理中的用户表格举行分页。

当页面点击分页Logo时,程序会自动去后台获取相应页数的记录。
重要代码如下:
急需引进的css和js文件有:

1、有二个同学叫笔者完毕二个如此的效劳就好像PHP,在表单中输入数字,然后网页就涌出相应的多寡;假诺是PHP的话就轻巧多了,Jquery完成照旧率先个,就从头狂的实行,最后照旧促成了(知识点:Jquery创制节点、获取表单的值、循环语句)

复制代码 代码如下:

复制代码 代码如下:

当页面点击分页Logo时,程序会自动去后台获取相应页数的记录。

复制代码 代码如下:

Jquery代码:

 <script type=”text/javascript” language=”javascript”>
$(function(){
$(“#btn”).click(function(){ //选用ID为btn的因素,加多点击事件
var result = $(“input[name=’text’]”).val(); 
//获取name为’text的文本框的值,并定义为变量result
$(“div”).remove(“.abc”);
//功效是:每便实施时就把含有.abc这么些类的div删除;

 <script type=”text/javascript” language=”javascript”>
$(function(){
$(“#btn”).click(function(){ //选用ID为btn的因素,增添点击事件
var result = $(“input[name=’text’]”).val(); 
//获取name为’text的文本框的值,并定义为变量result
$(“div”).remove(“.abc”);
//效用是:每回试行时就把含有.abc这么些类的div删除;

有关文书可从以下地方中挑选下载:

<link rel=”stylesheet” type=”text/css” href=”<%=basePath
%>css/theme/default/css/jpage.css”></link>
<link ID=”skin” rel=”stylesheet” type=”text/css” href=”<%=basePath
%>css/config.css” />
<script language=”javascript” type=”text/javascript”
src=”<%=basePath%20%>js/jquery.js”></script>

 <script type=”text/javascript” language=”javascript”>

for(i=1;i<=result;i++){    //for循环,定i=1,每趟循环就加1;
当i的值由1循环到等于result的值同样时(即“文本框的name=’text’的值”)就止住循环
var createobj = $(“<div class=’abc’>创造的节点</div>”);
//把div定义为变量createobj
$(“body”).append(createobj);
//把createobj这一个变量追加到html中的’body’里
}

for(i=1;i<=result;i++){    //for循环,定i=1,每一趟循环就加1;
当i的值由1循环到等于result的值同样时(即“文本框的name=’text’的值”)就告一段落循环
var createobj = $(“<div class=’abc’>成立的节点</div>”);
//把div定义为变量createobj
$(“body”).append(createobj);
//把createobj这几个变量追加到html中的’body’里
}

要害代码如下:

中间jsp页面代码如下:

$(function(){

});
});
</script>

});
});
</script>

亟待引进的css和js文件有:

复制代码 代码如下:

$(“#btn”).click(function(){ //选用ID为btn的要素,增多点击事件

HTML代码:

HTML代码:

<link rel="stylesheet" type="text/css" href="<%=basePath%20%>css/theme/default/css/jpage.css"></link>
    <link ID="skin" rel="stylesheet" type="text/css" href="<%=basePath%20%>css/config.css" />
    <script language="javascript" type="text/javascript" src="<%=basePath%20%>js/jquery.js"></script>

<script language=”jscript” type=”text/javascript”>
var pageIndex = 1; //当前页数
$(function(){
GetPageCount();//获取分页数量以及总的记录条数
$(“#load”).hide();//隐藏loading提示
$(“#template”).hide();//隐敝模板
ChangeState(0,1);//设置翻页按键的启幕状态
bind();//绑定第一页的多少
//第一页开关click事件
$(“#first”).click(function(){
pageIndex = 1;
ChangeState(0,1);
bind();
});
//上一页按键click事件
$(“#previous”).click(function(){
pageIndex -= 1;
ChangeState(-1,1);
if(pageIndex <= 1){
pageIndex = 1;
ChangeState(0,-1);
}
bind();
});
//下一页按键click事件
$(“#next”).click(function(){
pageIndex += 1;
ChangeState(1,-1);
if(pageIndex>=pageCount)
{
pageIndex = pageCount;
ChangeState(-1,0);
}
bind(pageIndex);
});
//最终一页按键click事件
$(“#last”).click(function(){
pageIndex = pageCount;
ChangeState(1,0);
bind(pageIndex);
});
//每页展现记录条数select事件
$(“#pageSize”).change(function(){
bind();
})
});
//AJAX方法赢得数据并呈现到页面上
function bind(){
$(“#load”).show();
var pageSize = $(“#pageSize”).val();
$.ajax({
type: “get”,//使用get方法访问后台
dataType: “json”,//重临json格式的数据
url:
“<%=basePath%>actionSmUser.do?method=listUser2”,//要拜候的后台地址
data: “pageIndex=” + pageIndex+”&pageSize=”+pageSize,//要发送的多寡
complete : function(msg){//msg为回到的数额,在此间做多少绑定
$(“[id=ready]”).remove();
var data = eval(“(“+msg.responseText+”)”);
$.each(data, function(i, n){
var row = $(“#template”).clone();
row.find(“#userId”).text(n.userId);
row.find(“#userName”).text(n.userName);
row.find(“#depId”).text(n.depId);
row.find(“#createTime”).text(n.createTime);
if(n.createTime !== undefined)
row.find(“#createTime”).text(n.createTime);
row.find(“#creator”).text(n.creator);
row.find(“#menusId”).text(n.menusId);
row.find(“#isValid”).text(n.isValid);
row.attr(“id”,”ready”);//退换绑定好数据的行的id
row.appendTo(“#datas”);//增多到模板的器皿中
澳门皇冠金沙网站,});
$(“[id=ready]”).show();
SetPageInfo();
}
});
}
function ChangeDate(date){
return date.replace(“-“,”/”).replace(“-“,”/”);
}
//设置第几页/共几页的音信
function SetPageInfo(){
var pageCount = $(“#pageCount”).val();
var totalCount = $(“#totalCount”).val();
var pageSize = $(“#pageSize”).val();
$(“#pageinfo”).html(” 第<input class=’default_pgCurrentPage’
id=’pageIndex’ type=’text’ value='”+pageIndex+
“‘ style=’width: 30px’ /> 页” + “/” +”共 “+pageCount+”页”+
” 检索到 “+totalCount+”条记录,显示第 “+(pageIndex*pageSize-pageSize)+”
条 – 第 “+(pageIndex*pageSize)+” 条记录”);
}
//AJAX方法得到分页总的数量
function GetPageCount(){
var pageSize = $(“#pageSize”).val();
$.ajax({
type: “get”,
dataType: “text”,
url: “<%=basePath%>actionSmUser.do?method=getPageCount”,
data: “pageSize=”+pageSize ,
async: false,
success: function(msg){
var data = eval(“(“+msg+”)”);
$(“#pageCount”).val(data[0].pageCount);
$(“#totalCount”).val(data[0].totalCount);
}
});
}
//改动翻页开关状态
function ChangeState(state1,state2){
$(“#first”).attr(“class”,”default_pgFirst default_pgBtn”);
$(“#previous”).attr(“class”,”default_pgPrev default_pgBtn”);
$(“#next”).attr(“class”,”default_pgNext default_pgBtn”);
$(“#last”).attr(“class”,”default_pgLast default_pgBtn”);
if(state1 == 1) {
document.getElementById(“first”).disabled = “”;
document.getElementById(“previous”).disabled = “”;
}else if(state1 == 0){
document.getElementById(“first”).disabled = “disabled”;
document.getElementById(“previous”).disabled = “disabled”;
$(“#first”).attr(“class”,”default_pgFirstDisabled default_pgBtn”);
$(“#previous”).attr(“class”,”default_pgPrevDisabled
default_pgBtn”);
}if(state2 == 1){
document.getElementById(“next”).disabled = “”;
document.getElementById(“last”).disabled = “”;
}else if(state2 == 0){
document.getElementById(“next”).disabled = “disabled”;
document.getElementById(“last”).disabled = “disabled”;
$(“#next”).attr(“class”,”default_pgNextDisabled default_pgBtn”);
$(“#last”).attr(“class”,”default_pgLastDisabled default_pgBtn”);
}
}
</script>

var result = $(“input[name=’text’]”).val();
 //获取name为’text的文本框的值,并定义为变量result

复制代码 代码如下:

复制代码 代码如下:

里头jsp页面代码如下:

html页面代码如下:

$(“div”).remove(“.abc”);
//效能是:每趟施行时就把含有.abc那个类的div删除;

<body>
<input type=”text” id=”text” name=”text” />
<input type=”button” id=”btn” value=”确定” />

<body>
<input type=”text” id=”text” name=”text” />
<input type=”button” id=”btn” value=”确定” />

   <script language="jscript" type="text/javascript">
     var pageIndex = 1;      //当前页数
      $(function(){
          GetPageCount();//获取分页数量以及总的记录条数
         $("#load").hide();//隐藏loading提示
        $("#template").hide();//隐藏模板
          ChangeState(0,1);//设置翻页按钮的初始状态

        bind();//绑定第一页的数据

        //第一页按钮click事件
        $("#first").click(function(){
            pageIndex = 1;
            ChangeState(0,1);
            bind();   
        });

        //上一页按钮click事件
        $("#previous").click(function(){
            pageIndex -= 1;
            ChangeState(-1,1);           
            if(pageIndex <= 1){
                pageIndex = 1;
                ChangeState(0,-1);
            }
            bind();   
        });

        //下一页按钮click事件
        $("#next").click(function(){
            pageIndex += 1;
            ChangeState(1,-1);
            if(pageIndex>=pageCount)
            {
                pageIndex = pageCount;
                ChangeState(-1,0);
            }
            bind(pageIndex);           
        });

        //最后一页按钮click事件
        $("#last").click(function(){
            pageIndex = pageCount;
            ChangeState(1,0);
            bind(pageIndex);           
        });            
        //每页显示记录条数select事件
        $("#pageSize").change(function(){
             bind();
        })
    });

    //AJAX方法取得数据并显示到页面上
    function bind(){
        $("#load").show();
        var pageSize = $("#pageSize").val();
        $.ajax({
            type: "get",//使用get方法访问后台
            dataType: "json",//返回json格式的数据
            url: "<%=basePath%>actionSmUser.do?method=listUser2",//要访问的后台地址
            data: "pageIndex=" + pageIndex+"&pageSize="+pageSize,//要发送的数据
            complete : function(msg){//msg为返回的数据,在这里做数据绑定
                $("[id=ready]").remove();
                var data = eval("("+msg.responseText+")");
                $.each(data, function(i, n){
                    var row = $("#template").clone();
                    row.find("#userId").text(n.userId);
                    row.find("#userName").text(n.userName);
                    row.find("#depId").text(n.depId);
                    row.find("#createTime").text(n.createTime);
                    if(n.createTime !== undefined) row.find("#createTime").text(n.createTime);
                    row.find("#creator").text(n.creator);
                    row.find("#menusId").text(n.menusId);
                    row.find("#isValid").text(n.isValid);

                    row.attr("id","ready");//改变绑定好数据的行的id
                    row.appendTo("#datas");//添加到模板的容器中
                });
                $("[id=ready]").show();
                SetPageInfo();
            }
        });
    }
    function ChangeDate(date){
         return date.replace("-","/").replace("-","/");
    }
    //设置第几页/共几页的信息
    function SetPageInfo(){
        var pageCount = $("#pageCount").val();
        var totalCount = $("#totalCount").val();
        var pageSize = $("#pageSize").val();
      $("#pageinfo").html(" 第<input class='default_pgCurrentPage' id='pageIndex' type='text' value='"+pageIndex+
      "' style='width: 30px'  /> 页" + "/" +"共 "+pageCount+"页"+
      "  检索到 "+totalCount+"条记录,显示第 "+(pageIndex*pageSize-pageSize)+" 条 - 第 "+(pageIndex*pageSize)+" 条记录");
    }
    //AJAX方法取得分页总数
    function GetPageCount(){
        var pageSize = $("#pageSize").val();
        $.ajax({
            type: "get",
            dataType: "text",
            url: "<%=basePath%>actionSmUser.do?method=getPageCount",
            data: "pageSize="+pageSize ,
            async: false,
            success: function(msg){
                var data = eval("("+msg+")");
                $("#pageCount").val(data[0].pageCount);
                $("#totalCount").val(data[0].totalCount);
            }
        });
    }

 //改变翻页按钮状态   
    function ChangeState(state1,state2){
        $("#first").attr("class","default_pgFirst default_pgBtn");
         $("#previous").attr("class","default_pgPrev default_pgBtn");
         $("#next").attr("class","default_pgNext default_pgBtn");
         $("#last").attr("class","default_pgLast default_pgBtn");
         if(state1 == 1) {           
             document.getElementById("first").disabled = "";
             document.getElementById("previous").disabled = "";
         }else if(state1 == 0){           
            document.getElementById("first").disabled = "disabled";
            document.getElementById("previous").disabled = "disabled";
            $("#first").attr("class","default_pgFirstDisabled default_pgBtn");
            $("#previous").attr("class","default_pgPrevDisabled default_pgBtn");
        }if(state2 == 1){
            document.getElementById("next").disabled = "";
            document.getElementById("last").disabled = "";
        }else if(state2 == 0){
            document.getElementById("next").disabled = "disabled";
            document.getElementById("last").disabled = "disabled";
            $("#next").attr("class","default_pgNextDisabled default_pgBtn");
            $("#last").attr("class","default_pgLastDisabled default_pgBtn");              
        }
    }
    </script>

复制代码 代码如下:

 

</body>

</body>

html页面代码如下:

<body>
<div>
<div>
<br />
<table id=”datas” align=”center” class=”listtable” width=”100%”
bgcolor=”#CCCCCC” cellSpacing=”1″ cellpadding=”1″
style=”margin-top:5px;”>
<tr class=”fixheader”>
<th width=”14%”>
用户ID</th>
<th width=”14%”>
顾客名称</th>
<th width=”14%”>
所在科室</th>
<th width=”14%”>
创造时间</th>
<th width=”14%”>
创建人</th>
<th width=”14%”>
菜单集名称</th>
<th width=”14%”>
是或不是有效</th>
</tr>
<tr id=”template” height=”22px” bgcolor=”#F9FDFF”
onmouseover=”javascript:this.style.backgroundColor=’#FFFFCC’; return
true;” onMouseOut=”javascript:this.style.backgroundColor=’#F9FDFF’;
return true;”>
<td id=”userId” class=”tdc”>
</td>
<td id=”userName” class=”tdc”>
</td>
<td id=”depId” class=”tdc”>
</td>
<td id=”createTime” class=”tdc”>
</td>
<td id=”creator” class=”tdc”>
</td>
<td id=”menusId” class=”tdc”>
</td>
<td id=”isValid” class=”tdc”>
</td>
</tr>
</table>
</div>
<div id=”load” style=”left: 0px; position: absolute; top: 0px;
background-color: red”>
LOADING….
</div>
<div class=”default_pgContainer” >
<div class=”default_container”>
<div class=”default_pgPanel” id=”skinDiv”>
<table class=”default_pgToolbar”>
<tr>
<td class=”black_pgCurrentPage”>
<select id=”pageSize” name=”pageSize”>
<option selected=”selected” value=”10″>10</option>
<option value=”20″>20</option>
<option value=”30″>30</option>
</select>
</td>
<td>
<div id=”first” class=”default_pgFirst default_pgBtn” />
</td>
<td>
<div id=”previous” class=”default_pgPrev default_pgBtn” />
</td>
<td class=”default_separator”>
</td>
<td>
<div id=”next” class=”default_pgNext default_pgBtn” />
</td>
<td>
<div id=”last” class=”default_pgLast default_pgBtn” />
</td>
<td class=”default_separator”>
</td>
<td>
<span id=”pageinfo”></span>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id=”test”></div>
<input type=”hidden” id=”pageCount” style=”width: 45px” />
<input type=”hidden” id=”totalCount” style=”width: 45px” />
</body>

for(i=1;i<=result;i++){    //for循环,定i=1,每一趟循环就加1;
当i的值由1循环到等于result的值同样时(即“文本框的name=’text’的值”)就告一段落循环

CSS代码:

CSS代码:

<body>
    <div>
        <div>
            <br />
            <table id="datas"  align="center" class="listtable" width="100%" bgcolor="#CCCCCC" cellSpacing="1" cellpadding="1" style="margin-top:5px;">
                <tr class="fixheader">
                    <th width="14%">
                          用户ID</th>
                    <th width="14%">
                        用户名称</th>
                    <th width="14%">
                        所在科室</th>
                    <th width="14%">
                        创建时间</th>
                    <th width="14%">
                        创建人</th>
                    <th width="14%">
                       菜单集名称</th>
                    <th width="14%">
                        是否有效</th>
                </tr>
                <tr id="template" height="22px" bgcolor="#F9FDFF"   onmouseover="javascript:this.style.backgroundColor='#FFFFCC'; return true;" onMouseOut="javascript:this.style.backgroundColor='#F9FDFF'; return true;">
                    <td id="userId" class="tdc">
                    </td>
                    <td id="userName" class="tdc">
                    </td>
                    <td id="depId" class="tdc">
                    </td>
                    <td id="createTime" class="tdc">
                    </td>
                    <td id="creator" class="tdc">
                    </td>
                    <td id="menusId" class="tdc">
                    </td>
                    <td id="isValid" class="tdc">
                    </td>
                </tr>
            </table>
        </div>
        <div id="load" style="left: 0px; position: absolute; top: 0px; background-color: red">
            LOADING....
        </div>

        <div class="default_pgContainer" >
            <div class="default_container">
                <div class="default_pgPanel" id="skinDiv">
                    <table class="default_pgToolbar">
                        <tr>
                            <td class="black_pgCurrentPage">
                                <select id="pageSize" name="pageSize">
                                    <option selected="selected" value="10">10</option>
                                    <option value="20">20</option>
                                    <option value="30">30</option>
                                </select>
                            </td>
                            <td>
                                <div id="first" class="default_pgFirst default_pgBtn" />
                            </td>
                            <td>
                                <div id="previous" class="default_pgPrev default_pgBtn" />
                            </td>
                            <td class="default_separator">
                            </td>
                            <td>
                                <div id="next" class="default_pgNext default_pgBtn" />
                            </td>
                            <td>
                                <div id="last" class="default_pgLast default_pgBtn" />
                            </td>
                            <td class="default_separator">
                            </td>
                            <td>

                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
     </div>
     <div id="test"></div> 
    <input type="hidden" id="pageCount" style="width: 45px" />
    <input type="hidden" id="totalCount" style="width: 45px" />
</body>

后台action中代码如下:

var createobj = $(“<div class=’abc’>创设的节点</div>”);
//把div定义为变量createobj

复制代码 代码如下:

复制代码 代码如下:

后台action中代码如下:

复制代码 代码如下:

$(“body”).append(createobj);
//把createobj那个变量追加到html中的’body’里

<style>
.abc {height:50px;width:50px; margin:20px;background:#ccc;}
</style>

<style>
.abc {height:50px;width:50px; margin:20px;background:#ccc;}
</style>

//分页获取用户信息
    public void listUser2(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response){
        RequestTool tool = new RequestTool(request);
        Integer pageSize = tool.getIntParameter("pageSize");
        Integer pageIndex = tool.getIntParameter("pageIndex");
        ResultPage res  = serviceSmUserImpl.findAllSmUsers(pageIndex, pageSize);
        List<SmUser> smUserList = (List<SmUser>)res.getResult();
        JSONArray array = new JSONArray();
        JSONObject object ;
        for(SmUser user:smUserList){
            object = new JSONObject();
            object.put("userId", user.getUserId());
            object.put("userName",user.getUserName());
            object.put("depId", user.getOrganCode());
            object.put("createTime", user.getCreateTime());
            object.put("creator", user.getCreator());
            object.put("menusId", user.getMenusId());
            object.put("isValid", (user.getValid().equals("1")?"有效":"无效"));
            array.add(object);
        }

        AjaxTool.returnAjaxResponse(response, array.toJSONString());

    }

//获取总的记录数和总页数
    public void getPageCount(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response){
        RequestTool tool = new RequestTool(request);
        int pageSize = tool.getIntParameter("pageSize");
        List<POJO> pojos = serviceSmUserImpl.findAll();
        int pageCount = pojos.size()% pageSize > 0 ? (pojos.size()/ pageSize+1):(pojos.size()/ pageSize);
        JSONArray array = new JSONArray();
        JSONObject object = new JSONObject();
        object.put("pageCount", pageCount);
        object.put("totalCount", pojos.size());
        array.add(object);
        AjaxTool.returnAjaxResponse(response,array.toJSONString());

    }

//分页获取顾客新闻
public void listUser2(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response){
RequestTool tool = new RequestTool(request);
Integer pageSize = tool.getIntParameter(“pageSize”);
Integer pageIndex = tool.getIntParameter(“pageIndex”);
ResultPage res = serviceSmUserImpl.findAllSmUsers(pageIndex,
pageSize);
List<SmUser> smUserList = (List<SmUser>)res.getResult();
JSONArray array = new JSONArray();
JSONObject object ;
for(SmUser user:smUserList){
object = new JSONObject();
object.put(“userId”, user.getUserId());
object.put(“userName”,user.getUserName());
object.put(“depId”, user.getOrganCode());
object.put(“createTime”, user.getCreateTime());
object.put(“creator”, user.getCreator());
object.put(“menusId”, user.getMenusId());
object.put(“isValid”, (user.getValid().equals(“1″)?”有效”:”无效”));
array.add(object);
}
AjaxTool.returnAjaxResponse(response, array.toJSONString());
}
//获取总的记录数和总页数
public void getPageCount(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response){
RequestTool tool = new RequestTool(request);
int pageSize = tool.getIntParameter(“pageSize”);
List<POJO> pojos = serviceSmUserImpl.findAll();
int pageCount = pojos.size()% pageSize > 0 ? (pojos.size()/
pageSize+1):(pojos.size()/ pageSize);
JSONArray array = new JSONArray();
JSONObject object = new JSONObject();
object.put(“pageCount”, pageCount);
object.put(“totalCount”, pojos.size());
array.add(object);
AjaxTool.returnAjaxResponse(response,array.toJSONString());
}

}

你恐怕感兴趣的篇章:

  • jQuery实现表格行和列的动态拉长与删除方法【测验可用】
  • 原生JS和JQuery动态拉长、删除表格行的方法
  • JQuery动态增进和删除表格行的诀窍
  • JQuery落成表格动态扩大行并对新行增加事件
  • 据说jQuery的动态表格插件
  • 听他们说jquery的动态创立表格的插件
  • JQuery
    Ajax动态生成Table表格
  • jquery动态扩大删除表格行的小例子
  • jQuery完结html表格动态增加新行的不二法门
  • Jquery
    动态变化表格示例代码
  • jQuery达成的简便动态增进、删除表格功效示例

1、有二个同班叫自身完成三个那样的功效似乎PHP,在表单中输入数字,然后网页就应时而生相应的数据;如若是PHP的话就回顾多了,…

文件打包下载

 

您或然感兴趣的篇章:

  • jquery
    DataTable达成前后台动态分页

});

});

</script>

HTML代码:

 

 

<body>

<input type=”text” id=”text” name=”text” />

<input type=”button” id=”btn” value=”确定” />

 

</body>

 

CSS代码:

 

<style>

.abc {height:50px;width:50px; margin:20px;background:#ccc;}

</style>

 

 

 

1、有叁个校友叫小编达成一个这么的效能就如PHP,在表单中输入数字,然后网页就出现相应的数额;假使是PHP的话就大约多了,…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图