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

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

 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. .Net中json序列化与反序列化

    NuGet中下载Newtonsoft.Json插件. public class JsonHelper<T>{ public static string ModelToJsonString( ...

  2. 使用 R 语言挖掘 QQ 群聊天记录

    1.获取数据 从 QQ 消息管理器中导出消息记录,保存的文本类型选择 txt 文件.这里获取的是某群从 2016-04-18 到 2016-05-07 期间的聊天记录,记录样本如下所示. 消息记录(此 ...

  3. js 数组原型

    Array.isArray( Array.prototype ) // A. true // B. false // C. error // D. other 答案是A. 其实 Array.proto ...

  4. PHP冒泡排序-手写

    <?php $a = [1,3,5,2,9,6]; for ($i = 0 ;$i < count($a) ;$i++) { for ($j = $i + 1;$j < count( ...

  5. 整合MyBatis（springboot）

    pom文件: <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>m ...

  6. js里面关于日期转换的问题

    我们拿到一个日期字符串:"2017-09-03",我们用new Date("2017-09-03")去转换成日期格式的时候,发现在火狐会报错,是因为火狐不支持这 ...

  7. MYSQL 总结——2

    1.mysql限制显示条目数:Limit,  Offset 图片网址:https://sqlbolt.com/lesson/filtering_sorting_query_results 实例: SE ...

  8. 数组和List以指定的方式拼接成字符串类型

    /// <summary> /// list转换成格式的字符串 /// </summary> /// <param name="param">拼 ...

  9. sparse_tensor feed_dict的时候十分不方便。

    假如说,你再处理文本的时候,写tfrecord的时候用的变长的类型, example = tf.train.Example(features=tf.train.Features(feature={ ' ...

  10. 使用cookie记录页面跳转次数，然后从最后一级页面跳转回首页面

    1.首先,给出cookie设置,获取,删除的操作函数. function setCookie(name,value) {          var Days = 30;          var ex ...