效果图：

现在我们可以先看它的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. 1036. Boys vs Girls (25)

    #include <stdio.h>#include <string.h>int main(){ int n,i; while(scanf("%d",&am ...

  2. 《ENVI下遥感影像自然真彩色合成方法》——TM、spot5

    来源：http://blog.sina.com.cn/s/blog_764b1e9d0100tz4f.html#bsh-73-375271630

  3. sort +awk+uniq 统计文件中出现次数最多的前10个单词

    实例cat logt.log|sort -s -t '-' -k1n |awk '{print $1;}'|uniq -c|sort -k1nr|head -100 统计文件中出现次数最多的前10个单 ...

  4. EasyUI Layout Full - Not Correct in IE8

    EasyUI Full布局在IE10,IE9下正常,IE8无效果,标记一下有知道的可以留个言! 如图 IE 10 IE 8

  5. Get the item a SharePoint workflow task is associated with

    This is handy. SharePoint helpfully populates the meta data with the GUID of the list and the ID of  ...

  6. 使用自定义任务审批字段创建 SharePoint 顺序工作流

    http://msdn.microsoft.com/zh-cn/library/hh824675(v=office.14).aspx#odc_sp14_ta_CreatingSPSeqWorkflow ...

  7. AFNetworking 简单应用

    最近最学习 AFNetworking ,根据自己所学对 AFNetWorking 一些简单应用做了一下简单封装,主要有 get,post形式获取 xml,json,get 方式获取图片,下载文件,上传 ...

  8. 如何在JavaScript里防止事件函数的高频触发和调用

    网页中JavaScript最基本的功能是监听或响应用户的动作,这非常的有用.用户的动作有些频率非常高,有的十分罕见.有些监听器函数的执行如闪电般完成,而有些繁重的会把浏览器拖死.拿浏览器窗口的resi ...

  9. 浏览器对象模型(BOM)

    BOM结构 用户浏览网页的时候,浏览器会自动创建一些对象,这些对象存放着浏览器窗口的属性和相关信息,也就是大家熟称的BOM.浏览器对象模型是一个层次化的对象集,我们可以通过window对象访问所有对象 ...

  10. JavaScript 踩坑心得— 为了高速（下）

    一.前言 本文的上一篇 JavaScript 踩坑心得- 为了高速(上) 主要和大家分享的是 JavaScript 使用过程中的基本原则以及编写过程中的心得分享,本文主要和大家聊聊在各个使用场景下的 ...