1<!doctype html>
2<html>
3 <body>
4 <input type='text' id='search' name='search' placeholder='Enter userid 1-27'><input type='button' value='Search' id='but_search'>
5 <br/>
6 <input type='button' value='Fetch all records' id='but_fetchall'>
7
8 <table border='1' id='userTable' style='border-collapse: collapse;'>
9 <thead>
10 <tr>
11 <th>S.no</th>
12 <th>Username</th>
13 <th>Name</th>
14 <th>Email</th>
15 </tr>
16 </thead>
17 <tbody></tbody>
18 </table>
19
20 <!-- Script -->
21 <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> --> <!-- jQuery CDN -->
22 <script src="{{asset('js/jquery-3.3.1.min.js')}}"></script>
23
24 <script type='text/javascript'>
25 $(document).ready(function(){
26
27 // Fetch all records
28 $('#but_fetchall').click(function(){
29 fetchRecords(0);
30 });
31
32 // Search by userid
33 $('#but_search').click(function(){
34 var userid = Number($('#search').val().trim());
35
36 if(userid > 0){
37 fetchRecords(userid);
38 }
39
40 });
41
42 });
43
44 function fetchRecords(id){
45 $.ajax({
46 url: 'getUsers/'+id,
47 type: 'get',
48 dataType: 'json',
49 success: function(response){
50
51 var len = 0;
52 $('#userTable tbody').empty(); // Empty <tbody>
53 if(response['data'] != null){
54 len = response['data'].length;
55 }
56
57 if(len > 0){
58 for(var i=0; i<len; i++){
59 var id = response['data'][i].id;
60 var username = response['data'][i].username;
61 var name = response['data'][i].name;
62 var email = response['data'][i].email;
63
64 var tr_str = "<tr>" +
65 "<td align='center'>" + (i+1) + "</td>" +
66 "<td align='center'>" + username + "</td>" +
67 "<td align='center'>" + name + "</td>" +
68 "<td align='center'>" + email + "</td>" +
69 "</tr>";
70
71 $("#userTable tbody").append(tr_str);
72 }
73 }else{
74 var tr_str = "<tr>" +
75 "<td align='center' colspan='4'>No record found.</td>" +
76 "</tr>";
77
78 $("#userTable tbody").append(tr_str);
79 }
80
81 }
82 });
83 }
84 </script>
85 </body>
86</html>