jquery通过ajax获取数据，控制显示的数据条数
效果图：
现在我们可以先看它的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获取数据，控制显示的数据条数的更多相关文章
- ajax 请求 对json传的处理 Jquery 使用Ajax获取后台返回的Json数据后,页面处理
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Jquery 使用Ajax获取后台返回的Json数据后,页面处理
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【转】Jquery 使用Ajax获取后台返回的Json数据后,页面处理
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 通过Jquery中Ajax获取json文件数据
1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...
- jquery的ajax异步请求接收返回json数据
http://www.jb51.net/article/51122.htm jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发 ...
- 今天在研究jquery用ajax提交form表单中得数据时，学习到了一种新的提交方式
今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式 jquery中的serialize() 方法 该方法通过序列化表单值,创建 URL 编码文本字符串 序列化的值可在 ...
- ajax导致Echarts不显示饼图数据、柱状图数据只显示气泡的问题。
1.ajax导致Echarts不显示饼图数据.柱状图数据只显示气泡的问题. ajax的同步.这个同步的意思是当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个aj ...
- XML(php中获取xml文件的方式/ajax获取xml格式的响应数据的方式)
1.XML 格式规范: ① 必须有一个根元素 ② 不可有空格.不可以数字或.开头.大小写敏感 ③ 不可交叉嵌套 ④ 属性双引号(浏览器自动修正成双引号了) ⑤ 特殊符号要使用实体 ⑥ 注释和HTML一 ...
- 3..jquery的ajax获取form表单数据
jq是对dom进行的再次封装.是一个js库,极大简化了js使用 jquery库在js文件中,包含了所有jquery函数,引用:<script src="jquery-1.11.1.mi ...
随机推荐
- XAML系列学习
在XAML中为属性赋值 1.使用Attribute=value形式 <Rectangle Width="100" Height="100" Stroke= ...
- iOS runtime 与 runloop
runtime是运行时机制,就是运行到的时候才会执行的机制(类似于栏加载)属于时间先后性质的 runloop 是主线程的运行的意思 属于 (loop) 循环性质的 以下是 具体点的 解释: run ...
- 人生规划和GTD——“知”、“得”与“合”
写在前面:非常不错的一篇GTD入门以及人生目标与规划的文章,值得收藏. 本文来自 零折 作为<小强升职记>的读书感悟,给我自己.作为分享,也送给或许需要的给你. 我不知道你是否真的需要.但 ...
- 经管资源库项目总结----在线预览office文件的实现与总结
依旧是这个经管的项目.在线预览作为资源和文档管理系统的一个很酷的并且是如此重要的功能,是必须要实现的.然后百度一下office在线预览,看起来so eazy啊,各种博客各种demo,一下子就做出效果来 ...
- Object-C单元测试&MOCK（摘录精选）
断言测试类型: 下面一共18个断言(SDK中也是18个,其含义转自ios UnitTest 学习笔记,真心佩服原文的博主): XCTFail(format…) 生成一个失败的测试: XCTAssert ...
- 超简单的卸载ORACLE 11g
本机环境 win10 64位 找到安装目录下的 F:\app\Shuai\product\11.2.0\dbhome_1 按键盘d找到deinstall文件夹进入 管理员运行deinstall.bat ...
- 1054: [HAOI2008]移动玩具 - BZOJ
Description 在一个4*4的方框内摆放了若干个相同的玩具,某人想将这些玩具重新摆放成为他心中理想的状态,规定移动时只能将玩具向上下左右四个方向移动,并且移动的位置不能有玩具,请你用最少的移动 ...
- PAT-乙级-1041. 考试座位号(15)
1041. 考试座位号(15) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 每个PAT考生在参加考试时都会被分 ...
- 转Spring+Hibernate+EHcache配置(二)
Spring AOP+EHCache简单缓存系统解决方案 需要使用Spring来实现一个Cache简单的解决方案,具体需求如下:使用任意一个现有开源Cache Framework,要求可以Cache系 ...
- ppshu
全部书籍已经下载完毕! http://3cvpkfx4gdnkcduj.onion/ https://3cvpkfx4gdnkcduj.onion.cab/ https://3cvpkfx4gdnkc ...