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

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

 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. js同步、异步、回调的执行顺序以及闭包的理解

    首先,记住同步第一.异步第二.回调最末的口诀 公式表达:同步=>异步=>回调 看一道经典的面试题: for (var i = 0; i < 5; i++) { setTimeout( ...

  2. 实现android"转盘抽奖"小项目后感想

    我这次做的小项目是android的转盘抽奖,因为这个小项目中有进程的调度,加锁等细节,而我们组的竞赛系统中也有这样的问题.通过这次的实践我发现了自己的好多问题也学到了很多. 个人问题: 1.自己的动手 ...

  3. libcurl编译使用，实现ftp功能

    Libcurl实现ftp的下载,上传功能.版本为curl-7.63.0 1.编译vs2015 参考资料:https://blog.csdn.net/yaojingkao/article/details ...

  4. 使用ssm（spring+springMVC+mybatis）创建一个简单的查询实例（二）（代码篇）

    这篇是上一篇的延续: 用ssm(spring+springMVC+mybatis)创建一个简单的查询实例(一) 源代码在github上可以下载,地址:https://github.com/guoxia ...

  5. makefile中的wildcard 、patsubst、

    在Makefile规则中,通配符会被自动展开.但在变量的定义和函数引用时,通配符将失效. 这种情况下如果需要通配符有效,就需要使用函数“wildcard”,它的用法是:$(wildcard PATTE ...

  6. 学习Linux系统中命令的简单方法

    如果说如何快速学习.了解Linux的话,我的答案是学命令.背命令!为何呢?对于一名新手来说,去学习Linux的思想.了解Linux的架构.明白Linux中“一切皆文件”概念虽然说是没有错,是对的.但是 ...

  7. python全栈开发笔记---------字符串格式化

    字符串格式化 %s 可以接收任何值, %d只能接收整形 .其他类型报错 msg ='i am %s my body' %'ales' print(msg) #i am ales my body msg ...

  8. python xml文件解析

    参考链接:http://www.runoob.com/python/python-xml.html

  9. webgl优化

    浏览器支持: Mozilla Firefox 42,Google Chrome 46,Apple Safari 9.0,MS Internet Explorer 11,MS Edge 13 Safar ...

  10. js带“.”的对象属性名怎么使用

    问题:这样的json对象(event) { "title": "title", "alert":"ding", &quo ...