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

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

 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. 元注解——java.lang.annotation.Target(1.8)

    参考资料:https://docs.oracle.com/javase/8/docs/api/java/lang/annotation/Target.html 普通注解’只能用来注解’代码’,而’元注 ...

  2. Android 按钮响应事件的几种方式

    目录 1.在布局中指定onClick属性 2.使用匿名内部类 3.在当前Activity中实现OnClickListener接口 4.创建内部类 1.在布局中指定onClick属性 布局代码 < ...

  3. 使用Jekins自动构建项目（GitLab+Java Maven）

    1. 登录Jekins 前提: Jekins 已经部署完成并能登录版本:Jenkins2.60.2 http://IP:端口/jenkins/view/all/newJob 2. 新建构建任务 选择项 ...

  4. Android中使用Thread线程与AsyncTask异步任务的区别

    最近和几个朋友交流Android开发中的网络下载问题时,谈到了用Thread开启下载线程时会产生的Bug,其实直接用子线程开启下载任务的确是很Low的做法,那么原因究竟如何,而比较高大上的做法是怎样? ...

  5. constructor __proto__ prototype

    js里面constructor __proto__  prototype这三个属性比较难理解,在重点研究这三个属性后,在这里做一个笔记, constructor:构造器,每个对象都有这个属性,他指向构 ...

  6. js的Timer方法

    如显示时间: <script> //获取时间 function mytime(){ var a = new Date(); var b = a.toLocaleTimeString(); ...

  7. Android测试（三）——APK文件反编译

    APK文件反编译: 在进行反编译操作前,先简单介绍下smali文件: smali是一种文件格式,语法和Jasmine的语言类似,这些smali文件包含开发应用程序时编写的java类的代码. 工具:ja ...

  8. Ansible 小手册系列 十四（条件判断和循环）

    条件判断 When 语句 在when 后面使用Jinja2 表达式,结果为True则执行任务. tasks: - name: "shut down Debian flavored syste ...

  9. Forth 输入流处理

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  10. 超哥教你发布CRM

    发布CRM你将使用以下软件 nginx uWSGI CentOS7 CRM项目文件 virtualenv supervisor WSGI.uWSGI python web服务器开发使用WSGI协议(W ...