效果图:

现在我们可以先看它的json数据,如图所示:

               然后可以对应我们的代码进行理解。

jquery通过ajax获取数据,并通过窗口大小控制显示的数据条数,以及可以根据需求隐掉列数据。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
html,body { height:%;}
body { margin:;}
table { border:1px solid #ccc;}
td,th { height:26px; font-family:"微软雅黑"; font-size:12px; padding:5px; text-align:left; border-left:1px solid #ccc;}
td {border-top:1px solid #ddd; color:#}
#topgn { position:relative;}
#ColumnsListBox { background:#fff; position:absolute; left:; top:20px; padding-top:5px; border:1px solid #ccc; border-bottom:none; display:none;}
.ColumnsList { font-size:12px; line-height:26px;border-bottom:1px solid #ccc; padding: 15px 10px; cursor:pointer;}
.ColumnsList span { width:20px; height:20px; background:red; display:inline-block; vertical-align:middle; background:url(img/checkbox.png) -60px -30px; margin-right:5px;}
.ColumnsList .checkbox { background-position:right ;}
#tablethead { display:none; position:fixed; left:; top:; z-index:; width:%;}
th { background:#; color:#fff;}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script>
$(function(){
function addShuJu(iNum){
var addNum=parseInt(iNum);
var Html="";
$.ajax({
type:"GET",
url:"http://10.10.140.77:5566/rs_Mianshi/goo.ashx",
data:{pagesize:iNum},
dataType:"json",
success: function(ret){
console.log(ret)
var date=ret['rows'];
var html="";
for(var i=;i<iNum;i++)
{
html+="<tr>"
+"<td>"+date[i]['RN']+"</td>"
+"<td>"+date[i]['u_kahao']+"</td>"
+"<td>"+date[i]['u_xingming']+"</td>"
+"<td>"+date[i]['u_shouji']+"</td>"
+"<td>"+date[i]['u_xingbie']+"</td>"
+"</tr>"
}
$("#tbody1").html(html);
},
error:function(){ }
}) }; addShuJu(); $("#pagechange").change(function(){
$("#tbody1").html("<tr><td colspan='5' style='text-align:center; height:240px;'>正在加载中....</td></tr>");
var aTh=$("#thead1 .thetr th");
var Columnshtml="";
for(var i=;i<aTh.length;i++)
{
Columnshtml+="<div date-check='true' data-col="+aTh.eq(i).attr('data-col')+" class='ColumnsList'><span></span>"+aTh[i].innerHTML+"</div>";
}
$("#ColumnsListBox").html(Columnshtml); $("#tablethead th").show();
aTh.show();
addShuJu($(this).val());
}); })
</script> </head> <body>
<div id="box">
<div id="topgn" class="changheight">
<input id="Columnsbtn" type="button" value="Columns">
<select id="pagechange">
<option>自动</option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
<div id="ColumnsListBox" class="dclickhide"></div>
</div>
<div id="tablethead">
<table width="100%" border="" cellpadding="" cellspacing="">
<thead id="thead2" style="background:#fff;" > </thead>
</table>
</div>
<table width="100%" border="" cellpadding="" cellspacing="" id="tab1">
<thead id="thead1" class="changheight" style="background:#fff;" >
<tr class="toptr2">
<th style="text-align:center; border-bottom:1px solid #ccc" colspan="" data-colspan="">号码</th>
<th style="text-align:center;border-bottom:1px solid #ccc" colspan="" data-colspan="">其他</th>
</tr>
<tr class="thetr" >
<th data-col="" width="20%">序号</th>
<th data-col="" width="20%">卡号</th>
<th data-col="" width="20%">姓名</th>
<th data-col="" width="20%">电话</th>
<th data-col="" width="20%">性别</th>
</tr>
</thead>
<tbody id="tbody1">
<tr>
<td colspan="" style="text-align:center; height:240px;">正在加载中....</td>
</tr>
</tbody>
</table> </div>
<br> <script>
$(window).scroll(function(){
if($(window).scrollTop()>$("#thead1 .thetr").position().top)
{
$("#tablethead").show();
$("#thead2").html($("#thead1").html())
//console.log(11);
}
else
{
$("#tablethead").hide();
}
})
</script>
<script type="text/javascript">
$(function(){
//var aTh=$("#trbox>th");
var aTh=$("#thead1 .thetr th");
var Columnshtml="";
for(var i=;i<aTh.length;i++)
{
Columnshtml+="<div date-check='true' data-col="+aTh.eq(i).attr('data-col')+" class='ColumnsList'><span></span>"+aTh[i].innerHTML+"</div>"
}
$("#ColumnsListBox").html(Columnshtml);
$("#Columnsbtn").click(function(){
$("#ColumnsListBox").show();
return false;
}); $("#topgn").on("click",".ColumnsList",function(){
var iNmu=parseInt($(this).index())+;
var number=parseInt($("#thead1 .toptr2 th").eq($(this).attr("data-col")).attr("colspan"));
if($(this).attr("date-check")=="true"){
number-=;
if(number<=)
{
$("#thead1 .toptr2 th").eq($(this).attr("data-col")).hide();
}
$("#thead1 .toptr2 th").eq($(this).attr("data-col")).attr("colspan",number);
$("#tab1 tr td:nth-child("+iNmu+")").hide();
$(".thetr th:nth-child("+iNmu+")").hide();
$(this).find("span").addClass("checkbox");
$(this).attr("date-check","false");
}
else
{
number+=;
$("#thead1 .toptr2 th").eq($(this).attr("data-col")).show();
$("#thead1 .toptr2 th").eq($(this).attr("data-col")).attr("colspan",number);
$("#tab1 tr td:nth-child("+iNmu+")").show();
$(".thetr th:nth-child("+iNmu+")").show();
$(this).find("span").removeClass("checkbox");
$(this).attr("date-check","true");
       //$("#ColumnsListBox").attr('data-cols', $("#thead1 .thetr th").filter(":visible").length);
//$(".cloneTd,.noData").attr('colspan', $("#thead1 .thetr th").filter(":visible").length);
        }
return false;
});
$(document).click(function(){
$(".dclickhide").hide();
}) }); </script> </body>
</html>

一般来说,每次隐掉某些列,然后再重新通过ajax加载数据,还是选中把列全部显示出来比较好,故而还存在一个列重新初始化的事件。

function colsInit() {
var aTh = $("#thead1 .thetr th");
var Columnshtml = "";
for (var i = ; i < aTh.length; i++) {
Columnshtml += "<div date-check='true' data-col=" + aTh.eq(i).attr('data-col') + " class='ColumnsList'><span></span>" + aTh[i].innerHTML + "</div>";
}
$("#ColumnsListBox").html(Columnshtml); $(".toptr2 th").each(function () {
$(this).attr('colspan', $(this).attr('data-colspan')); // data-colspan的用处就在这儿。
})
$("#tablethead th,.toptr2 th").show();
aTh.show();
}

不过其实这儿也是有不好的地方,就是系统中遇到一个页面就得绑一次字段,还得对应着,其实还是比较麻烦的,毕竟一个系统中很多页面的字段其实都不一致。

故而有优化一文之说---jquery通过ajax获取数据(优化、封装)

jquery通过ajax获取数据,控制显示的数据条数的更多相关文章

  1. ajax 请求 对json传的处理 Jquery 使用Ajax获取后台返回的Json数据后,页面处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Jquery 使用Ajax获取后台返回的Json数据后,页面处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 【转】Jquery 使用Ajax获取后台返回的Json数据后,页面处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 通过Jquery中Ajax获取json文件数据

    1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...

  5. jquery的ajax异步请求接收返回json数据

    http://www.jb51.net/article/51122.htm jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发 ...

  6. 今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式

    今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式 jquery中的serialize() 方法 该方法通过序列化表单值,创建 URL 编码文本字符串 序列化的值可在 ...

  7. ajax导致Echarts不显示饼图数据、柱状图数据只显示气泡的问题。

    1.ajax导致Echarts不显示饼图数据.柱状图数据只显示气泡的问题. ajax的同步.这个同步的意思是当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个aj ...

  8. XML(php中获取xml文件的方式/ajax获取xml格式的响应数据的方式)

    1.XML 格式规范: ① 必须有一个根元素 ② 不可有空格.不可以数字或.开头.大小写敏感 ③ 不可交叉嵌套 ④ 属性双引号(浏览器自动修正成双引号了) ⑤ 特殊符号要使用实体 ⑥ 注释和HTML一 ...

  9. 3..jquery的ajax获取form表单数据

    jq是对dom进行的再次封装.是一个js库,极大简化了js使用 jquery库在js文件中,包含了所有jquery函数,引用:<script src="jquery-1.11.1.mi ...

随机推荐

  1. Svg 画图(电池)

    公司现在在做充电桩项目,其中要显示充电桩的电池充电情况,功能展示的时候要画图,之前做的时候准备使用HightChar来画,但是,hightchar好像没有这样的电池图形,最后,项目经理要我自己通过sv ...

  2. 去除C/C++程序代码中的注释

    最近搞软件著作权,去除代码空行和注释比较麻烦,想写个程序自动去除,去网上搜了下,发现有类似的程序,不过只有去除注释.鉴于word中可以去除空行(用^p^p替换^p),先用网上的代码,以后有时间写个完整 ...

  3. Java 类加载机制 ClassLoader Class.forName 内存管理 垃圾回收GC

    [转载] :http://my.oschina.net/rouchongzi/blog/171046 Java之类加载机制 类加载是Java程序运行的第一步,研究类的加载有助于了解JVM执行过程,并指 ...

  4. @Entity设置实体lazy = false

    问题描述 在通过Hibernate查询Bean信息时报以下异常信息: org.hibernate.LazyInitializationException: could not initialize p ...

  5. HTML5的本地存储 LocalStorage

    localStorage顾名思义,就是本地存储的意思,在以前很长一段时间,要想在客户端存 储一些配置及登录信息等数据都只能通过COOKIE或flash的方式,如今html5来临,也 带来了更强大的本地 ...

  6. pl/sql developer连接远程数据库

    本地不安装oracle client程序,直接使用pl/sql developer连接远程数据库 考虑到机子本身资源有限,一个client会占用很多资源,尝试使用不安装客户端的方式进行远程连接. 需要 ...

  7. PAT-乙级-1023. 组个最小数 (20)

    1023. 组个最小数 (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CAO, Peng 给定数字0-9各若干个.你可以以 ...

  8. Python利用ConfigParser读取配置文件

    http://www.2cto.com/kf/201108/100384.html #!/usr/bin/python # -*- coding:utf-8 -*- import ConfigPars ...

  9. 可以继承的C++ Singleton基类

    单例模式(Singleton Pattern)是设计模式中的一种,它用来保证系统中最多只能存在一个它的实例,其做法是由类自身来创建和持有它的对象实例,把对实例的创建权和管理权都控制在自己手中,以便控制 ...

  10. SQL Server CONVERT() 函数

    http://www.w3school.com.cn/sql/func_convert.asp 定义和用法 CONVERT() 函数是把日期转换为新数据类型的通用函数. CONVERT() 函数可以用 ...