效果图：

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

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

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

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. html,body { height:%;}
  8.  body { margin:;}
  9. table { border:1px solid #ccc;}
  10. td,th {  height:26px;  font-family:"微软雅黑"; font-size:12px; padding:5px; text-align:left; border-left:1px solid #ccc;}
  11. td {border-top:1px solid #ddd; color:#}
  12. #topgn { position:relative;}
  13. #ColumnsListBox { background:#fff; position:absolute; left:; top:20px; padding-top:5px;   border:1px solid #ccc; border-bottom:none; display:none;}
  14. .ColumnsList { font-size:12px; line-height:26px;border-bottom:1px solid #ccc; padding: 15px  10px; cursor:pointer;}
  15. .ColumnsList span { width:20px; height:20px; background:red; display:inline-block; vertical-align:middle; background:url(img/checkbox.png) -60px -30px; margin-right:5px;}
  16. .ColumnsList .checkbox { background-position:right ;}
  17. #tablethead { display:none; position:fixed; left:; top:; z-index:; width:%;}
  18. th { background:#; color:#fff;}
  19. </style>
  20. <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
  21.  
  22. <script>
  23. $(function(){
  24.     function addShuJu(iNum){
  25.         var addNum=parseInt(iNum);
  26.         var Html="";
  27.         $.ajax({
  28.             type:"GET",
  29.             url:"http://10.10.140.77:5566/rs_Mianshi/goo.ashx",
  30.             data:{pagesize:iNum},
  31.             dataType:"json",
  32.             success: function(ret){
  33.                 console.log(ret)
  34.                 var date=ret['rows'];
  35.                 var html="";
  36.                 for(var i=;i<iNum;i++)
  37.                 {
  38.                     html+="<tr>"
  39.                         +"<td>"+date[i]['RN']+"</td>"
  40.                         +"<td>"+date[i]['u_kahao']+"</td>"
  41.                         +"<td>"+date[i]['u_xingming']+"</td>"
  42.                         +"<td>"+date[i]['u_shouji']+"</td>"
  43.                         +"<td>"+date[i]['u_xingbie']+"</td>"
  44.                         +"</tr>"
  45.                 }
  46.                 $("#tbody1").html(html);
  47.             },
  48.             error:function(){
  49.  
  50.             }
  51.         })
  52.  
  53.     };    
  54.  
  55.     addShuJu();
  56.  
  57.     $("#pagechange").change(function(){
  58.         $("#tbody1").html("<tr><td colspan='5' style='text-align:center; height:240px;'>正在加载中....</td></tr>");
  59.         var aTh=$("#thead1 .thetr th");
  60.         var Columnshtml="";
  61.         for(var i=;i<aTh.length;i++)
  62.         {
  63.             Columnshtml+="<div date-check='true' data-col="+aTh.eq(i).attr('data-col')+" class='ColumnsList'><span></span>"+aTh[i].innerHTML+"</div>";
  64.         }
  65.         $("#ColumnsListBox").html(Columnshtml);
  66.  
  67.         $("#tablethead th").show();
  68.         aTh.show();
  69.         addShuJu($(this).val());
  70.     });
  71.  
  72. })
  73. </script>
  74.  
  75. </head>
  76.  
  77. <body>
  78. <div id="box">
  79.     <div id="topgn" class="changheight">
  80.         <input id="Columnsbtn" type="button" value="Columns">
  81.         <select id="pagechange">
  82.             <option>自动</option>
  83.             <option></option>
  84.             <option></option>
  85.             <option></option>
  86.             <option></option>
  87.             <option></option>
  88.         </select>
  89.         <div id="ColumnsListBox" class="dclickhide"></div>
  90.     </div>
  91.     <div id="tablethead">
  92.         <table  width="100%" border="" cellpadding="" cellspacing="">
  93.             <thead id="thead2" style="background:#fff;" >
  94.  
  95.             </thead>
  96.         </table>
  97.     </div>
  98.     <table width="100%" border="" cellpadding="" cellspacing="" id="tab1">
  99.         <thead id="thead1" class="changheight" style="background:#fff;" >
  100.             <tr class="toptr2">
  101.                 <th style="text-align:center;  border-bottom:1px solid #ccc"  colspan="" data-colspan="">号码</th>
  102.                 <th style="text-align:center;border-bottom:1px solid #ccc"  colspan="" data-colspan="">其他</th>
  103.             </tr>
  104.             <tr class="thetr" >
  105.                  <th data-col="" width="20%">序号</th>
  106.                  <th data-col="" width="20%">卡号</th>
  107.                  <th data-col="" width="20%">姓名</th>
  108.                  <th data-col="" width="20%">电话</th>
  109.                  <th data-col="" width="20%">性别</th>
  110.               </tr>
  111.         </thead>
  112.       <tbody id="tbody1">
  113.           <tr>
  114.             <td colspan="" style="text-align:center; height:240px;">正在加载中....</td>
  115.         </tr>
  116.       </tbody>
  117. </table>
  118.  
  119. </div>
  120. <br>
  121.  
  122. <script>
  123. $(window).scroll(function(){
  124.     if($(window).scrollTop()>$("#thead1 .thetr").position().top)
  125.     {
  126.         $("#tablethead").show();
  127.         $("#thead2").html($("#thead1").html())
  128.         //console.log(11);
  129.     }
  130.     else
  131.     {
  132.         $("#tablethead").hide();
  133.     }
  134. })
  135. </script>
  136. <script type="text/javascript">
  137. $(function(){
  138.     //var aTh=$("#trbox>th");
  139.     var aTh=$("#thead1 .thetr th");
  140.     var Columnshtml="";
  141.     for(var i=;i<aTh.length;i++)
  142.     {
  143.         Columnshtml+="<div date-check='true' data-col="+aTh.eq(i).attr('data-col')+" class='ColumnsList'><span></span>"+aTh[i].innerHTML+"</div>"
  144.     }
  145.     $("#ColumnsListBox").html(Columnshtml);
  146.     $("#Columnsbtn").click(function(){
  147.         $("#ColumnsListBox").show();
  148.         return false;
  149.     });
  150.  
  151.     $("#topgn").on("click",".ColumnsList",function(){
  152.         var iNmu=parseInt($(this).index())+;
  153.         var number=parseInt($("#thead1 .toptr2 th").eq($(this).attr("data-col")).attr("colspan"));
  154.         if($(this).attr("date-check")=="true"){
  155.             number-=;
  156.             if(number<=)
  157.             {
  158.                 $("#thead1 .toptr2 th").eq($(this).attr("data-col")).hide();
  159.             }
  160.             $("#thead1 .toptr2 th").eq($(this).attr("data-col")).attr("colspan",number);
  161.             $("#tab1 tr td:nth-child("+iNmu+")").hide();
  162.             $(".thetr th:nth-child("+iNmu+")").hide();
  163.             $(this).find("span").addClass("checkbox");
  164.             $(this).attr("date-check","false");
  165.         }
  166.         else
  167.         {
  168.             number+=;
  169.             $("#thead1 .toptr2 th").eq($(this).attr("data-col")).show();
  170.             $("#thead1 .toptr2 th").eq($(this).attr("data-col")).attr("colspan",number);
  171.             $("#tab1 tr td:nth-child("+iNmu+")").show();
  172.             $(".thetr th:nth-child("+iNmu+")").show();
  173.             $(this).find("span").removeClass("checkbox");
  174.             $(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);
  1.         }
  2.         return false;
  3.     });
  4.     $(document).click(function(){
  5.         $(".dclickhide").hide();
  6.     })
  7.  
  8. });
  9.  
  10. </script>
  11.  
  12. </body>
  13. </html>

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

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

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

故而有优化一文之说---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. ASP.NET 页面传值得9种方式

    1. Get(即使用QueryString显式传递)     方式:在url后面跟参数.     特点:简单.方便.     缺点:字符串长度最长为255个字符:数据泄漏在url中.     适用数据 ...

  2. JS中遍历普通数组和字典数组的区别

    // 普通数组 var intArray = new Array(); intArray[0] = "第一个"; intArray[1] = "第二个"; fo ...

  3. HZNU1015: 矩阵排序

    http://acm.hznu.edu.cn/JudgeOnline/problem.php?id=1015 题意:把矩阵每一行都排序. (以前觉得很难的题目回头看看原来如此简单 ][]; ; i&l ...

  4. Good Bye 2015B

    Problem B:http://codeforces.com/contest/611/problem/B B. New Year and Old Property 题意:问输入的年份a到b中转化为二 ...

  5. SGU 186

    总是拆最短的链子  连接长的链子   贪心.... #include <cstdio> #include <cstring> #include <cmath> #i ...

  6. adt安装慢解决

    原地址:http://yuanzhifei89.iteye.com/blog/1884398 安装adt的时候不管时在线安装还是下载下来了离线安装,都不见安装进度条动,只要把一个选项勾掉立马就让进度条 ...

  7. DJANGO技巧两则：模拟MKDIR -P及配合NGINX上传大文件不使超时

    这都是在开发当哪遇到的问题,网上转转,作个记录: http://blog.chinaunix.net/uid-25525723-id-1596574.html http://bookshadow.co ...

  8. POJ3690+位运算

    题意:给定一个01矩阵.T个询问,每次询问大矩阵中是否存在这个特定的小矩阵. /* 64位的位运算!!! 题意: 给定一个01矩阵.T个询问,每次询问大矩阵中是否存在这个特定的小矩阵. (64位记录状 ...

  9. zoj 3329 One Person Game 概率DP

    思路:这题的递推方程有点麻烦!! dp[i]表示分数为i的期望步数,p[k]表示得分为k的概率,p0表示回到0的概率: dp[i]=Σ(p[k]*dp[i+k])+dp[0]*p0+1 设dp[i]= ...

  10. 深入理解JVM--JVM垃圾回收机制

    Java语言出来之前,大家都在拼命的写C或者C++的程序,而此时存在一个很大的矛盾,C++等语言创建对象要不断的去开辟空间,不用的时候有需要不断的去释放空间,既要写构造函数,又要写析构函数,很多时候都 ...