效果图：

现在我们可以先看它的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. Sybase ASE安装过程报错，无法创建数据库设备[AM fork() failed]

    今天同事要搭建一套测试环境,安装开发版的SYBASE ASE 15.03 Windows平台下的,发现安装过程中到了创建数据库设备的环节就开始报错了,报错信息如下: 03/24/14 09:31:44 ...

  2. Tomcat 搭配 Nginx 还是 Apache 呢?

    Apache .Tomcat.Nginx的区别, 哪个与Tomcat搭配效率高? 一. 定义: 1. Apache Apache HTTP服务器是一个模块化的服务器,可以运行在几乎所有广泛使用的计算机 ...

  3. sql之解决数据库表的循环依赖问题

    三张数据表关系如图: 其实出现表循环依赖情况:就是 同时  ConfigCompany和 Department 也有依赖,就会报错,说有循环依赖,就会报错. 所以 这个时候的解决办法:可以改 在数据库 ...

  4. 实时数据处理环境搭建flume+kafka+storm：2.flume 安装

    1.  解压  tar -zxvf     2.配置       拷贝配置文件 :cp flume-conf.properties.template flume-conf.properties     ...

  5. 荣誉，还是苦逼？| 也议全栈工程师和DevOps

    引言 全栈工程师(本文称「全栈」开发者)和 DevOps 无疑是近期最火的词汇,无论是国外还是国内.而且火爆程度远超于想象. 全栈和 DevOps,究竟是我们的新职业方向,还是仅仅创业公司老板的心头所 ...

  6. 【leetcode】Longest Substring Without Repeating Characters （middle）

    Given a string, find the length of the longest substring without repeating characters. For example, ...

  7. 1961-计算机基础知识大赛 2 (new)

    描述 求A^B的最后三位数表示的整数(1<=A,B<=10000) 输入 A B 输出 A^B的最后三位数 样例输入 2 3 12 6 样例输出 8 984 #include<ios ...

  8. Amzon MWS API开发之订单接口

    Amazon订单接口是Amazon MWS 开发接口中的一大块,我们可以通过接口调用来获得订单数据. 在调用接口之前,首先我们要获得相关店铺商家的店铺密钥等信息.如下: 在此我将所有信息定义在一个类中 ...

  9. 李洪强iOS开发本人集成环信的经验总结_03_注册

    李洪强iOS开发本人集成环信的经验总结_03_注册 环信一共提供了三种注册的方法:  01 同步注册:  02 异步注册:  03 - 使用代理回调进行注册,但是3.0没有了,3.0之前有  调用注册 ...

  10. spring结合时，web.xml的配置

    <!-- 1. web.xml配置 <context-param> <param-name>webAppRootKey</param-name> <pa ...