效果图：
现在我们可以先看它的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获取数据（优化、封装）