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

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

 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. hdu 1558 Segment set 线段相交+并查集

    Segment set Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Prob ...

  2. SQL Server 第三章 结构化查询语言

    SQL脚本: create database electric; use electric go create table Salvaging( prj_no int primary key, prj ...

  3. 使用pm2 管理node服务后台运行

    npm run dev的服务想放在服务器上,但是putty一断服务就没了. 网上差了下forever和pm2用的比较多,尤其是pm2 简直太好用了.. 具体操作如下 安装 npm install -g ...

  4. Multivariate normal distribution | 多元正态分布

    现在终于需要用到了.

  5. CSS清除浮动的方法及优缺点

    浮动是CSS布局里面用的比较多的属性.浮动的框向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 因为浮动会使当前元素产生向上浮的效果,所以浮动的元素会脱离正常的文档流,它包围的内容在 ...

  6. PAT 1084 Broken Keyboard

    1084 Broken Keyboard (20 分)   On a broken keyboard, some of the keys are worn out. So when you type ...

  7. npm 设置和取消代理配置

    设置代理npm config set proxy=http://127.0.0.1:8087npm config set registry=http://registry.npmjs.org12关于h ...

  8. 命令行听歌http://www.linuxsir.org/bbs/thread280142.html?pageon=1#1584689

    在纯字符界面下听歌 利用 play 命令可以在命令行中播放音频文件,在纯字符界面下也没问题! ----------------------------------------------------- ...

  9. EasyExcel导入工具（SpringMVC下使用）

    easyExcel:由阿里巴巴公司开发,由github托管 github上有详细使用文档 github地址:https://github.com/alibaba/easyexcel/blob/mast ...

  10. 【转载】关于nginx以及内核参数的配置

    nginx应用总结(2)--突破高并发的性能优化  原文地址:https://www.cnblogs.com/kevingrace/p/6094007.html 在日常的运维工作中,经常会用到ngin ...