API tools faq
paste
asimryu

rest index.html with angular pagination

asimryu
Nov 13th, 2018
378
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.60 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>SIMPLE RESTful API</title>
  6.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  7.     <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/start/jquery-ui.css">
  8.     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
  9.     <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
  10.     <script>jQuery.noConflict();</script>
  11.     <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  12.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
  13.     <style>
  14.         .display-none { display: none; }
  15.  
  16.     </style>
  17. </head>
  18. <body>
  19.     <!-- container // -->
  20.     <div class="container" ng-app="myApp" ng-controller="myFriend" ng-init="getFriends(1)">
  21.         <!-- header // -->
  22.         <div class="jumbotron text-center">
  23.             <h1>Simple RESTful API Example</h1>
  24.             <p><a href="#!" class="btn-add btn btn-primary"><i class="fas fa-user-friends"></i> Add Friend</a></p>
  25.         </div>
  26.         <!-- // header -->
  27.  
  28.         <!-- view json // -->
  29.         <div style="margin: 20px 0;">
  30.             <textarea id="getalljsondata" rows="5" class="form-control display-none"></textarea>
  31.             <p class="text-right" style="margin-top: 10px;"><a href="#!" class="get-all-data btn btn-info">View JSON</a></p>
  32.         </div>
  33.         <!-- // view json -->
  34.    
  35.         <!-- list and search // -->
  36.         <div>
  37.             <!-- search // -->
  38.             <div>
  39.                 <form>
  40.                     <div class="form-group">
  41.                         <input type="text" class="form-control" id="search" placeholder="Search..." ng-model="sch">
  42.                     </div>
  43.                 </form>
  44.             </div>
  45.             <!-- // search -->
  46.  
  47.             <div>
  48.                 <p class="text-right">
  49.                     <span id="page">0</span>    / <span id="pages">0</span>&nbsp;&nbsp;
  50.                     <button class="btn btn-info" ng-click="getFriends(-1)"><i class="fas fa-angle-double-left"></i></button>
  51.                     <button class="btn btn-info" ng-click="getFriends(1)"><i class="fas fa-angle-double-right"></i></button>
  52.                 </p>
  53.             </div>
  54.  
  55.             <!-- list table // -->
  56.             <table id="friendstable" class="table table-bordered table-hover">
  57.                 <tr class="active">
  58.                     <td>id</td>
  59.                     <td>name</td>
  60.                     <td>city</td>
  61.                     <td>Phone</td>
  62.                     <td>Email</td>
  63.                     <td>&nbsp;</td>
  64.                 </tr>
  65.                 <tr ng-repeat="f in friends | filter:sch">
  66.                     <td>{{ f.id }}</td>
  67.                     <td>{{ f.name }}</td>
  68.                     <td>{{ f.city }}</td>
  69.                     <td>{{ f.phone }}</td>
  70.                     <td>{{ f.email }}</td>
  71.                     <td>
  72.                         <a class="btn-del btn btn-danger btn-sm" href="{{ f.id }}"><i class="fas fa-trash-alt"></i></a>
  73.                         <a class="btn-modify btn btn-warning btn-sm" href="{{ f.id }}"><i class="fas fa-pen"></i></a>
  74.                     </td>
  75.                 </tr>
  76.             </table>
  77.             <!-- // list table -->
  78.         </div>
  79.         <!-- // list and search -->
  80.  
  81.     </div>
  82.     <!-- // container -->
  83.  
  84.  
  85.     <!-- write form dialog // -->
  86.     <div id="write-form-dialog" class="display-none">
  87.         <form id="write-form" onsubmit="return false;">
  88.             <div class="form-group row">
  89.                 <label for="friendName" class="col-sm-2 col-form-label">Name</label>
  90.                 <div class="col-sm-10">
  91.                     <input type="text" class="form-control" id="friendName" placeholder="friend's name">
  92.                 </div>
  93.             </div>
  94.             <div class="form-group row">
  95.                 <label for="friendCity" class="col-sm-2 col-form-label">City</label>
  96.                 <div class="col-sm-10">
  97.                     <input type="text" class="form-control" id="friendCity" placeholder="friend's city">
  98.                 </div>
  99.             </div>
  100.             <div class="form-group row">
  101.                 <label for="friendPhone" class="col-sm-2 col-form-label">Phone</label>
  102.                 <div class="col-sm-10">
  103.                     <input type="text" class="form-control" id="friendPhone" placeholder="friend's phone number">
  104.                 </div>
  105.             </div> 
  106.             <div class="form-group row">
  107.                 <label for="friendEmail" class="col-sm-2 col-form-label">Email</label>
  108.                 <div class="col-sm-10">
  109.                     <input type="text" class="form-control" id="friendEmail" placeholder="friend's phone email">
  110.                 </div>
  111.             </div>
  112.         </form>
  113.     </div>
  114.     <!-- // write form dialog -->
  115.  
  116.  
  117.     <script>
  118.         var pages = 0;
  119.         var total = 0;
  120.         jQuery.getJSON("./api/pages",function(result){
  121.             pages = result.pages;
  122.             total = result.total;
  123.             jQuery("#pages").text(pages);
  124.         });
  125.  
  126.         //get all data into textarea
  127.         jQuery(".get-all-data").on("click", function(){
  128.             jQuery.get("/api/friend", function(res){
  129.                 jQuery("#getalljsondata").val(res).show();
  130.             });
  131.         });
  132.  
  133.         var page = 0;
  134.         var app = angular.module("myApp", []);
  135.         app.controller("myFriend", function($scope, $http){
  136.             $scope.friends = [];
  137.             $scope.getFriends = function(num){
  138.                 page = page + num;
  139.                 if( num == 1) {
  140.                     if( page > pages ) page = pages;   
  141.                 } else if( num == -1 ) {
  142.                     if( page < 1 ) page = 1;
  143.                 }
  144.                 jQuery("#page").text(page);
  145.                 $http.get("/api/friend?page=" + page).then(function(result){
  146.                     $scope.friends = result.data;
  147.                 });            
  148.             };
  149.         });
  150.  
  151.         jQuery("#friendstable").on("click", ".btn-modify", function(event){
  152.             event.preventDefault();
  153.             var id=jQuery(this).attr("href");
  154.             if( ! id ) return;
  155.             jQuery.getJSON("/api/friend/" + id, function(result){
  156.                 var friend = result[0];
  157.                 //console.log(friend);
  158.                 jQuery("#friendName").val(friend.name);
  159.                 jQuery("#friendCity").val(friend.city);
  160.                 jQuery("#friendPhone").val(friend.phone);
  161.                 jQuery("#friendEmail").val(friend.email);
  162.                 jQuery("#write-form-dialog").dialog({
  163.                     width: 600,
  164.                     height: 400,
  165.                     modal: true,
  166.                     title: "친구 정보 수정",
  167.                     buttons: {
  168.                         "Save": function(){
  169.                             var formdata = {};
  170.                             formdata.id = id;
  171.                             formdata.mode = "PUT";
  172.                             formdata.name = jQuery("#friendName").val();
  173.                             formdata.city = jQuery("#friendCity").val();
  174.                             formdata.phone = jQuery("#friendPhone").val();
  175.                             formdata.email = jQuery("#friendEmail").val();
  176.                             saveData(formdata);
  177.                         },
  178.                         "Close" : function(){
  179.                             jQuery(this).dialog("close");
  180.                         }
  181.                     }
  182.                 });
  183.             });
  184.         });
  185.  
  186.  
  187.         function saveData(data) {
  188.  
  189.             if( ! data ) return;
  190.             var url = "./api/friend";
  191.             if( data.id ) url += "/" + data.id;
  192.             jQuery.ajax({
  193.                 url: url,
  194.                 method: data.mode,
  195.                 data: data,
  196.                 success: function(result){
  197.                     console.log(result);
  198.                     var res = jQuery.parseJSON(result);
  199.                     if( res.success == "true" ) {
  200.                         alert(res.count + "개의 자료가 저장됨");
  201.                         location.reload();
  202.                     } else {
  203.                         alert("데이터 저장 실패");
  204.                     }
  205.                 }
  206.             });
  207.  
  208.         }
  209.  
  210.     </script>
  211. </body>
  212. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!