效果图：

现在我们可以先看它的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. Swift与Objective-C的对比

    WWDC 2014上苹果再次惊世骇俗的推出了新的编程语言Swift 雨燕, 这个消息会前没有半点风声的走漏.消息发布当时,会场一片惊呼,相信全球看直播的码农们当时也感觉脑袋被敲了一记闷棍吧.于是熬夜学 ...

  2. (转载)Cocos2dx-OpenGL ES2.0教程：编写自己的shader(2)

    在上篇文章中,我给大家介绍了如何在cocos2d-x里面绘制一个三角形,当时我们使用的是cocos2d-x引擎自带的shader和一些辅助函数.在本文中,我将演示一下如何编写自己的shader,同时, ...

  3. linux 历史命令用法（转）

    许多使用过Linux一段时间的人通过一些基础操作已经能够把Linux各方面基本玩转,但是如果没有经过系统学习的话就容易缺乏一些实战技巧.这系列文章介绍一些关于bash的能够提高效率的技巧,主要是关于历 ...

  4. Solr + Hadoop = Big Data Love

    FROM:http://architects.dzone.com/articles/solr-hadoop-big-data-love 许多人使用Hadoop的开源项目来处理大数据的大数据集,因为它是 ...

  5. Unity3D中Ragdoll的用法

    一.创建Ragdoll      见unity3d组件文档里的Ragdoll Wizard.由于unity3d中的Ragdoll设置的骨骼点名字与3DMAX里人体骨骼命名有些不一样,下图为Unity3 ...

  6. <Learning How to Learn>Week One: Focused versus Diffuse Thinking

    1-1 Introduction to the focused and diffuse modes (4:40) 两种思考的模式:focused mode以及diffuse mode focused ...

  7. hdu 4672 Present Day, Present Time 博弈论

    看了解题报告才知道怎么做!! 题意:有 N 堆石子和 M 个石子回收站,每回合操作的人可以选择一堆石子,从中拿出一些 放到石子回收站里(可以放进多个回收站,每个回收站可以使用无数次),但每个石子回收站 ...

  8. hdu 2147 kiki's game 博弈论

    找规律的博弈论!! 很容易发现当n,m都为奇数时先手必败! 代码如下: #include<iostream> #include<stdio.h> #define I(x,y) ...

  9. poj 2065 SETI 高斯消元

    看题就知道要使用高斯消元求解! 代码如下: #include<iostream> #include<algorithm> #include<iomanip> #in ...

  10. 易企秀 we+ Maka 兔展 四大H5页面制作工具

    H5这个由HTML5简化而来的词汇,正通过微信广泛传播.H5是集文字.图片.音乐.视频.链接等多种形式的展示页面,丰富的控件.灵活的动画特效.强大的交互应用和数据分析,高速低价的实现信息传播,非常适合 ...