效果图：

现在我们可以先看它的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. iOS6 以上设置文本高度，行高(转)

    2013-12-09     我来说两句   来源:冻僵的企鹅'zone   收藏    我要投稿 在iOS 7之前,常用下面这个方法计算文本高度sizeWithFont:constrainedToS ...

  2. 预告：准备开个坑，集中学习一下esp32模块

    对这个模块有兴趣的可以关注我以后的更新,寒假会抽空写几篇心得.

  3. [原创] zabbix学习之旅一：源码安装

    zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案.zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位/解决存 ...

  4. linux 添加用户

    1.下面就开始来说怎么添加新用户 我们以添加一个用户名为jorcen的新用户为例来说明,执行下面的命令: # useradd jorcen 2.那么就新用户就添加完成,但是没有任何信息,新用户添加完成 ...

  5. 【莫比乌斯反演】关于Mobius反演与gcd的一些关系与问题简化(bzoj 2301 Problem b&&bzoj 2820 YY的GCD&&BZOJ 3529 数表)

    首先我们来看一道题  BZOJ 2301 Problem b Description 对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd( ...

  6. BZOJ 1706: [usaco2007 Nov]relays 奶牛接力跑

    Description FJ的N(2 <= N <= 1,000,000)头奶牛选择了接力跑作为她们的日常锻炼项目.至于进行接力跑的地点 自然是在牧场中现有的T(2 <= T < ...

  7. CSRF注入式攻击防御讲解

    0x01 什么是CSRF攻击 CSRF是Cross Site Request Forgery的缩写(也缩写为XSRF),直译过来就是跨站请求伪造的意思,也就是在用户会话下对某个CGI做一些GET/PO ...

  8. PHP5 session 详解

    http协议是WEB服务器与客户端(浏览器)相互通信的协议,它是一种无状态协议.所谓无状态,指的是不会维护http请求数据,http请求是独立的,非持久的.而越来越复杂的WEB应用,需要保存一些用户状 ...

  9. Codeigniter开发技巧：连接多个数据库（可实现DB读写分离）

    在开发中,我们有时候会遇到在同一程序中链接多个数据库的需求,这对Codeigniter框架来说是很简单的,我们只需要在 database.php文件中配置少许参数即可. 默认情况下,CI配置的是链接一 ...

  10. RCC 2014 Warmup (Div. 2) ABC

    题目链接 A. Elimination time limit per test:1 secondmemory limit per test:256 megabytesinput:standard in ...