001.<?php
002. include "connection.php";
003. $query = "SELECT user_serial,user_bz,user_lname,user_depname,user_id FROM dt_user WHERE dep_no='0010401' and user_type='0'";
004. $result = sqlsrv_query($conn, $query);
005. ?>
006. <!DOCTYPE html>
007. <html>
008. <head>
009. <title><?=$title;?></title>
013. </head>
014. <body>
015. <br /><br />
016. <div class="container" style="width:700px;">
017.
018. <br />
019. <div class="table-responsive">
020. <div align="right">
021. <button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add</button>
022. </div>
023. <br />
024. <div id="employee_table">
025. <table class="table table-bordered table-striped">
026. <tr>
027. <th >ชื่อ-นามสกุล</th>
028. <th >เลขบัตรประชาชน</th>
029. <th >ตำแหน่ง</th>
030. <th >หน่วยงาน</th>
031. <th >เพิ่มการลา</th>
032. <th >ดูข้อมูลการลา</th>
033. </tr>
034. <?php
035. while($row = sqlsrv_fetch_array($result))
036. {
037. ?>
038. <tr>
039. <td><?php echo $row["user_lname"]; ?></td>
040. <td><?php echo $row["user_id"]; ?></td>
041. <td><?php echo $row["user_bz"]; ?></td>
042. <td><?php echo $row["user_depname"]; ?></td>
043. <td><button type="button" name="edit" id="<?php echo $row["user_serial"]; ?>" class="btn btn-success btn-sm edit_data" /><span class='glyphicon glyphicon-plus' aria-hidden='true'></span></button></td>
044. <td><button type="button" name="view" id="<?php echo $row["user_id"]; ?>" class="btn btn-primary btn-sm view_data" /><span class='glyphicon glyphicon-eye-open' aria-hidden='true'></span></button></td>
045. </tr>
046. <?php
047. }
048. ?>
049. </table>
050. </div>
051. </div>
052. </div>
053. </body>
054. </html>
055. <div id="dataModal" class="modal fade">
056. <div class="modal-dialog">
057. <div class="modal-content">
058. <div class="modal-header">
059. <button type="button" class="close" data-dismiss="modal">×</button>
060. <h4 class="modal-title">รายละเอียดการลา</h4>
061. </div>
062. <div class="modal-body" id="employee_detail">
063. </div>
064. <div class="modal-footer">
065. <button type="button" class="btn btn-default" data-dismiss="modal">ปิด</button>
066. </div>
067. </div>
068. </div>
069. </div>
070. <div id="add_data_Modal" class="modal fade">
071. <div class="modal-dialog">
072. <div class="modal-content">
073. <div class="modal-header">
074. <button type="button" class="close" data-dismiss="modal">×</button>
075. <h4 class="modal-title">เพิ่ม</h4>
076. </div>
077. <div class="modal-body">
078. <form method="post" id="insert_form">
079. <label>Enter Employee Name</label>
080. <input type="text" name="name" id="name" class="form-control" />
081. <br />
082. <label>Enter Employee Address</label>
083. <textarea name="address" id="address" class="form-control"></textarea>
084. <br />
085. <label>Select Gender</label>
086. <select name="gender" id="gender" class="form-control">
087. <option value="Male">Male</option>
088. <option value="Female">Female</option>
089. </select>
090. <br />
091. <label>Enter Designation</label>
092. <input type="text" name="designation" id="designation" class="form-control" />
093. <br />
094. <label>Enter Age</label>
095. <input type="text" name="age" id="age" class="form-control" />
096. <br />
097. <input type="hidden" name="employee_id" id="employee_id" />
098. <input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />
099. </form>
100. </div>
101. <div class="modal-footer">
102. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
103. </div>
104. </div>
105. </div>
106. </div>
107. <script>
108. $(document).ready(function(){
109. $('#add').click(function(){
110. $('#insert').val("Insert");
111. $('#insert_form')[0].reset();
112. });
113. $(document).on('click', '.edit_data', function(){
114. var user_serial = $(this).attr("id");
115. $.ajax({
116. url:"fetch.php",
117. method:"POST",
118. data:{user_serial:user_serial},
119. dataType:"json",
120. success:function(data){
121.
122. $('#name').val(data.user_lname);
123. $('#address').val(data.user_id);
124. $('#gender').val(data.gender);
125. $('#designation').val(data.user_depname);
126. $('#age').val(data.user_bz);
127. $('#employee_id').val(data.user_serial);
128. $('#insert').val("เพิ่มการลา");
129. $('#add_data_Modal').modal('show');
130. }
131.
132. });
133. });
134. $('#insert_form').on("submit", function(event){
135. event.preventDefault();
136. if($('#name').val() == "")
137. {
138. alert("Name is required");
139. }
140. else if($('#address').val() == '')
141. {
142. alert("Address is required");
143. }
144. else if($('#designation').val() == '')
145. {
146. alert("Designation is required");
147. }
148. else if($('#age').val() == '')
149. {
150. alert("Age is required");
151. }
152. else
153. {
154. $.ajax({
155. url:"insert.php",
156. method:"POST",
157. data:$('#insert_form').serialize(),
158. beforeSend:function(){
159. $('#insert').val("Inserting");
160. },
161. success:function(data){
162. $('#insert_form')[0].reset();
163. $('#add_data_Modal').modal('hide');
164. $('#employee_table').html(data);
165. }
166. });
167. }
168. });
169. $(document).on('click', '.view_data', function(){
170. var user_id = $(this).attr("id");
171. if(user_id != '')
172. {
173. $.ajax({
174. url:"select.php",
175. method:"POST",
176. data:{user_id:user_id},
177. success:function(data){
178. $('#employee_detail').html(data);
179. $('#dataModal').modal('show');
180. }
181. });
182. }
183. });
184. });
185. </script>
