一.相隔万里的客户端服务器数据交互

请求头发过去的轻量级文本数据，后台根据这些信息处理

 response返回的如果时html的话，那么是全局刷新

在ajax中data回调获得了数据，然后操作dom进行填充数据

纯HTML对数据的操纵

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

   <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

    <style media="screen">

        table {

            border-collapse: collapse;

            border-color: rgba(205, 193, 222, 0.84);

        }

    </style>

</head>

<body>

    <table border="1">

        <thead>

            <tr>

                <th>

                    &nbsp;编号&nbsp;

                </th>

                <th>

                    &nbsp;语言&nbsp;

                </th>

                <th>

                    &nbsp;课时&nbsp;

                </th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>c001</td>

                <td>c#</td>

                <td>80</td>

            </tr>

            <tr>

                <td>c002</td>

                <td>Java</td>

                <td>70</td>

            </tr>

            <tr>

                <td>c003</td>

                <td>PHP</td>

                <td>60</td>

            </tr>

            <tr>

                <td>c004</td>

                <td>Perl</td>

                <td>50</td>

            </tr>

        </tbody>

    </table>

   <script>

        $(document).ready(function() {

            var sort_direction=1; //排序标志，1为升序，-1为降序

            $('th').each(function(i) {

                $(this).click(function() {

                    if(sort_direction==1) {

                        sort_direction=-1;

                    }

                    else {

                        sort_direction=1;

                    }

                    //获得行数组

                    var trarr=$('table').find('tbody > tr').get();

                    //数组排序

                    trarr.sort(function(a, b) {

                        var col1=$(a).children('td').eq(i).text().toUpperCase();

                        var col2=$(b).children('td').eq(i).text().toUpperCase();

                        return(col1 < col2) ? -sort_direction: (col1 > col2) ? sort_direction: 0;

                        //返回-1表示a>b降序,返回1表示a<b升序,否则为0相等

                        /*

                         * if (col1 > col2) {

                            return sort_direction;

                        }else if(col1 <col2){

                            return -sort_direction;

                        }else{

                            return 0;

                        }*/

                    }

                    );

                    $.each(trarr, function(i, row) {

                        //将排好序的数组重新填回表格

                        $('tbody').append(row);

                    }

                    );

                }

                );

            }

            );

        }

    );

    </script>

</body>

</html>

巧妇难为无米之炊（ Model数据）的更多相关文章

  1. 【SpringMVC】SpringMVC系列9之Model数据返回到View

    9.Model数据返回到View 9.1.概述     Spring MVC 提供了以下几种途径输出模型数据: ModelAndView: 处理方法返回值类型为 ModelAndView 时, 方法体 ...

  2. django model数据 时间格式

    from datetime import datetime dt = datetime.now() print '时间:(%Y-%m-%d %H:%M:%S %f): ' , dt.strftime( ...

  3. .NET MVC model数据验证

    MVC提供了很方便的数据验证,只需要在model里加入相关的正则等,那么就会在前台里生成相关的验证脚本.需要引用两个js文件: jquery.validate.min.js jquery.valida ...

  4. ASP.NET-DropDownListFor绑定model数据

    在ASP.NET中,DropDownListFor绑定model数据比用html的select方便太多了,配合listmode这种模型集合就可以在controller里面直接foreach循环处理li ...

  5. iOS去除数组中重复的model数据

    // 去除数组中model重复 ; i < self.selectedModelArray.count; i++) { ;j < self.selectedModelArray.count ...

  6. ASP.NET MVC系列:从Controller访问Model数据

    在项目解决方案中,添加一个MoviesController控制器,选择对应的模板,和模型类以及数据上下文:关于如何添加模型类和数据上下文,我们在ASP.NET MVC系列:添加模型中已经介绍过

  7. MVC Model数据验证

    概述 上节我们学习了Model的数据在界面之间的传递,但是很多时候,我们在数据传递的时候为了确保数据的有效性,不得不给Model的相关属性做基本的数据验证. 本节我们就学习如何使用 System.Co ...

  8. laravel创建新model数据的两种方法

    laravel中的CRUD操作中,通过对代表数据表中row的model对象操作,来更新数据库表. 对于创建新的row的操作,有两种功能上相同的方法: 1.create: $user = User::c ...

  9. Django Model数据访问Making queries

    创建完Model之后, Django 自动为你提供一套数据库抽象层的API,利用它可以完成创建,提取,更新,删除对象的操作. 以下面的Model为例: class Blog(models.Model) ...

随机推荐

  1. 将nginx添加至service服务

    一.问题描述: 无法用service命令启动nginx 二.问题分析: /etc/init.d/目录下缺少nginx默认启动脚本 三.问题解决: 在/etc/init.d/路径下添加脚本文件,名称为n ...

  2. 基本数据类型float和double的区别

    float : 单精度浮点数 double : 双精度浮点数 两者的主要区别如下: 01.在内存中占有的字节数不同 单精度浮点数在机内存占4个字节 双精度浮点数在机内存占8个字节 02.有效数字位数不 ...

  3. RabbitMQ(2) 一般介绍

    RabbitMQ 即一个消息队列,主要是用来实现应用程序的异步和解耦,同时也能起到消息缓冲,消息分发的作用. 消息中间件在互联网公司的使用中越来越多,刚才还看到新闻阿里将RocketMQ捐献给了apa ...

  4. iSCSI网络协议.学习笔记

    Internet SCSI(iSCSI)是一种网络协议,使用TCP/IP网络来传输SCSI协议.它是代替FC(Fibre Channel-based,光纤通道) SAN的很好选择.你可以在Linux下 ...

  5. Python 总结一

    '''形式参数不占内存,在调用时开辟内存,在函数结束时释放内存默认参数 调用方式:位置参数.关键字参数 *args (元组) **kwargs(字典) 局部变量:在子程序中使用的变量全局变量:glob ...

  6. CSS设置表格TD宽度布局

    使用表格布局时,对单元格的宽度控制很伤脑筋,所以查阅资料整理如下: 一.表格布局table-layout 语法: table-layout : auto | fixed 取值: auto  : 大多数 ...

  7. Pyhon中运算符的使用

    1. a & b python中的&延续了C/C++的含义,表示位运算. 例如 3 & 4:3&5:6&7 3 & 4 = (011)2 & ( ...

  8. 由通过seeion识别保存在cookie中的seeionID引发的CSRF问题

    上图是一个完整的CSRF攻击过程解释图 重点是第三句话 用户在没有登出的情况下,被攻击者获得了SESSIONID信息,伪造真用户登录 二.CSRF防御 通过 referer.token 或者 验证码 ...

  9. frameset，iframe框架之间如何互相调用变量、函数

    以往一直在编写的都是前台的UI,很少使用到frameset.iframe,对其了解也是十分有限,只是知道其可以为其当前页面引入html文件成为当前页的一部分,但是这两天在做后台UI界面的时候,发现这样 ...

  10. base64详解及实现

    概述 base64 说起来大家应该都是很熟悉的,很多类型的数据都可以转成base64的编码规则,例如图片,pdf,文本,邮件内容等. 什么是base64 根据RFC2045的定义,base64被定义为 ...