1. 程式人生 > >巧婦難為無米之炊( Model數據)

巧婦難為無米之炊( Model數據)

upper lse document div screen amp .get info 交互

一.相隔萬裏的客戶端服務器數據交互

請求頭發過去的輕量級文本數據,後臺根據這些信息處理

技術分享圖片

技術分享圖片

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數據)