效果图：

现在我们可以先看它的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. Ducci Sequence

    Description   A Ducci sequence is a sequence of n-tuples of integers. Given an n-tuple of integers ( ...

  2. poj 2947 Widget Factory

    Widget Factory 题意:有n件装饰品,有m组信息.(1 <= n ,m<= 300)每组信息有开始的星期和结束的星期(是在mod 7范围内的)并且还包括num种装饰品的种类(1 ...

  3. Java中的异常处理(三) - 自定义异常处理

    1.异常处理类 package second; public class MyException extends Exception { MyException (){ } MyException ( ...

  4. Objective-C中的数据类型、常量、变量、运算符与表达式

    1.Objective-C中的数据类型: Objective-C中的基本数据类型有:int.char(-128-127).float.double.BOOL,Byte(0-255) Id类型相当于(等 ...

  5. [笨木头FireFly 02]入门篇2_客户端发送请求，服务器处理请求

    原地址:http://www.9miao.com/question-15-53940.html 好,经过上一篇不权威的讲解,大家已经能轻易地让客户端和服务端连接起来了. 但是,仅仅是连接了,可它们俩不 ...

  6. 如果Java 失宠于Oracle，那么未来会怎么样？

    [编者按]对于前不久 Oracle 裁掉了一部分 Java 布道师,近日一位 Oracle 前高管称其为该机构对Java的「计划报废」.如果这个计划是属实的,那么对于寻常的开发者.已经采用了 Java ...

  7. 1028-Digital Roots

    描述 The digital root of a positive integer is found by summing the digits of the integer. If the resu ...

  8. HDU 1422 重温世界杯（DP）

    点我看题目 题意 : 中文题不详述. 思路 : 根据题目描述及样例可以看出来,如果你第一个城市选的是生活费减花费大于等于0的时候才可以,最好是多余的,这样接下来的就算是花超了(一定限度内的花超),也可 ...

  9. Android 遍历sdcard中指定文件夹下的图片（jpg,jpeg,png）

    File scanner5Directory = new File(Environment.getExternalStorageDirectory().getPath() + "/scann ...

  10. python调试 设置断点

    1在所需要调试的地方加入如下代码: import pdb    pdb.set_trace() 2调试代码常用命令: 实例请见参考文献: 1http://www.cnblogs.com/qi09/ar ...