· 10 years ago · Apr 11, 2016, 07:45 PM
1<?php
2$hostname='server67.0hosting.me';
3$username='u8462856_test';
4$password='koloiko555';
5$database='u8462856_test';
6
7$con=mysqli_connect($hostname,$username,$password,$database) or die(mysqli_error());
8mysql_query("SET NAMES 'utf8");
9mysql_query("SET CHARACTER SET 'utf8'");
10?>
11
12<!DOCTYPE html>
13<html>
14<head>
15<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
16<title>A fancy add,edit,delete ajax paginated mysql table</title>
17<link rel="stylesheet" type="text/css" href="http://triass.ru/view/style.css" />
18<script src="http://triass.ru/view/jquery.js"></script>
19<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
20<script type="text/javascript" src="pagination.js"></script>
21<link rel="stylesheet" type="text/css" href="http://triass.ru/view/css/normalize.css" />
22<link rel="stylesheet" type="text/css" href="http://triass.ru/view/css/component.css" />
23<link rel="stylesheet" type="text/css" href="http://triass.ru/view/css/content.css" />
24<script src="http://triass.ru/view/js/modernizr.custom.js"></script>
25
26</head>
27
28<body>
29 <div id="formDiv">
30 <form id="formSearch" >
31 Search by Name <input type="text" id="fieldSearch" name="search_text" >
32 <input type="submit" value="Search">
33 </form>
34 <div id="divLoading"></div>
35 <div id="selectDiv">
36 <small>
37 <select id="pageRecord">
38 <option value="1">1</option>
39 <option value="2">2</option>
40 <option selected value="3">3</option>
41 <option value="4">4</option>
42 </select><i> Record per Page</i>
43 </small>
44 </div>
45 </div>
46
47 <div id="divPageData"></div>
48</body>
49</html>
50
51<?php
52
53
54/*
55Developed by Reneesh T.K
56reneeshtk@gmail.com
57You can use it with out any worries...It is free for you..It will display the out put like:
58First | Previous | 3 | 4 | 5 | 6 | 7| 8 | 9 | 10 | Next | Last
59Page : 7 Of 10 . Total Records Found: 20
60*/
61class Pagination_class{
62 var $result;
63 var $anchors;
64 var $total;
65 function Pagination_class($qry,$starting,$recpage)
66 {
67 include('connect.php');
68 $rst = mysqli_query($con,$qry) or die(mysqli_error());
69 $numrows = mysqli_num_rows($rst);
70 $qry .= " limit $starting, $recpage";
71 $this->result = mysqli_query($con,$qry) or die(mysqli_error());
72 $next = $starting+$recpage;
73 $var = ((intval($numrows/$recpage))-1)*$recpage;
74 $page_showing = intval($starting/$recpage)+1;
75 $total_page = ceil($numrows/$recpage);
76
77 if($numrows % $recpage != 0){
78 $last = ((intval($numrows/$recpage)))*$recpage;
79 }else{
80 $last = ((intval($numrows/$recpage))-1)*$recpage;
81 }
82 $previous = $starting-$recpage;
83 $anc = "<ul id='pagination-flickr'>";
84 if($previous < 0){
85 $anc .= "<li class='previous-off'>First</li>";
86 $anc .= "<li class='previous-off'>Previous</li>";
87 }else{
88 $anc .= "<li class='next'><a href='javascript:pagination(0);'>First </a></li>";
89 $anc .= "<li class='next'><a href='javascript:pagination($previous);'>Previous </a></li>";
90 }
91
92 ################If you dont want the numbers just comment this block###############
93 $norepeat = 4;//no of pages showing in the left and right side of the current page in the anchors
94 $j = 1;
95 $anch = "";
96 for($i=$page_showing; $i>1; $i--){
97 $fpreviousPage = $i-1;
98 $page = ceil($fpreviousPage*$recpage)-$recpage;
99 $anch = "<li><a href='javascript:pagination($page);'>$fpreviousPage </a></li>".$anch;
100 if($j == $norepeat) break;
101 $j++;
102 }
103 $anc .= $anch;
104 $anc .= "<li class='active'>".$page_showing."</li>";
105 $j = 1;
106 for($i=$page_showing; $i<$total_page; $i++){
107 $fnextPage = $i+1;
108 $page = ceil($fnextPage*$recpage)-$recpage;
109 $anc .= "<li><a href='javascript:pagination($page);'>$fnextPage</a></li>";
110 if($j==$norepeat) break;
111 $j++;
112 }
113 ############################################################
114 if($next >= $numrows){
115 $anc .= "<li class='previous-off'>Next</li>";
116 $anc .= "<li class='previous-off'>Last</li>";
117 }else{
118 $anc .= "<li class='next'><a href='javascript:pagination($next);'>Next </a></li>";
119 $anc .= "<li class='next'><a href='javascript:pagination($last);'>Last</a></li>";
120 }
121 $anc .= "</ul>";
122 $this->anchors = $anc;
123
124 $this->total = "Page : $page_showing <i> Of </i> $total_page . Total Records Found: $numrows";
125 }
126}
127?>
128
129<?php
130include('connect.php');
131mysql_query("SET NAMES 'utf8");
132mysql_query("SET CHARACTER SET 'utf8'");
133if(isset($_POST['action']) && $_POST['action']=="add") //menangani aksi penambahan data pelanggan
134 {
135
136 $name=$_POST['add_name'];
137 $address=$_POST['add_address'];
138 $exam_no=$_POST['add_exam_no']; $pattern="/^[A-Z]{2}d{4}b/";
139 if(($name=="")||($address == "")||($exam_no == "")){
140 echo '{"status":"1"}';
141 exit;
142 }
143 else if( !preg_match($pattern,$exam_no)){
144 echo '{"status":"2"}';
145 exit;
146 }else{
147
148 $test=mysqli_query($con,"INSERT INTO students(name,address,exam_no) VALUES('$name','$address','$exam_no')") or die ("data gagal ditambahakan!");
149
150 echo '{"status":"3"}';
151 exit;
152 }
153 }
154
155elseif(isset($_POST['action'])&& $_POST['action']=="update") //menangani aksi perubahan data pelanggan
156 {
157
158
159 $id=$_POST['edit_id'];
160 $name=$_POST['edit_name'];
161 $address=$_POST['edit_address'];
162 $exam_no=$_POST['edit_exam_no'];
163
164 $test = mysqli_query($con,"UPDATE students SET name='$name',address='$address',exam_no='$exam_no' WHERE id='$id'") or die ("data gagal di-update!");
165 echo '{"status":"3"}';
166 exit;
167 }
168 elseif(isset($_POST['action']) && $_POST['action']=="delete") //menangani aksi penghapusan data pelanggan
169 {
170
171 $id = $_POST['delete_id'];
172 $test = mysqli_query($con,"delete from students where id='$id'");
173 if(mysqli_affected_rows($con) == 1){ //jika jumlah baris data yang dikenai operasi delete == 1
174 echo '{"status":"1"}';
175 }else{
176 echo '{"status":"0"}';
177 }
178 exit;
179 }
180 ?>
181
182<script>
183function pagination(page){
184 var search = $("input#fieldSearch").val();
185 var record = $("select#pageRecord").val();
186 if (search!==""){
187 dataString = 'starting='+page+'&name='+search+'&perpage='+ record+'&random='+Math.random();
188 }
189
190 else{
191 dataString = 'starting='+page+'&perpage='+record+'&random='+Math.random();
192 }
193
194 $.ajax({
195 url:"tablepage.php",
196 data: dataString,
197 type:"GET",
198 success:function(data)
199 {
200 $('#divPageData').html(data);
201 }
202 });
203}
204
205function loadData(){
206 var dataString;
207 var search = $("input#fieldSearch").val();
208 var record = $("select#pageRecord").val();
209 dataString = 'name='+ search + '&perpage=' + record;
210
211 $.ajax({
212 url: "tablepage.php",
213 type: "GET",
214 data: dataString,
215 success:function(data)
216 {
217 $('#divPageData').html(data);
218 }
219 });
220 }
221
222
223
224$('#students tr:even:not(#nav):not(#total)').addClass('even');
225$('#students tr:odd:not(#nav):not(#total)').addClass('odd')
226 $("form#form1").submit(function(){
227 var vId = $("input#edit_id").val();
228 var vName = $("input#edit_name").val();
229 var vAddress = $("input#edit_address").val();
230 var vExam = $("input#edit_exam_no").val();
231 var myRegExp=/^[A-Z]{2}d{4}b/;
232
233
234 if ((vName=="")||(vAddress == "")||(vExam == "")){
235 alert("Please complete the missing field(s)");
236 $("input#edit_name").focus();
237 return false;
238 }
239 else if( !myRegExp.test(vExam)){
240 alert ('Invalid Format for Exam No.');
241 $("input#edit_exam_no").focus();
242 return false;
243 }
244 else{
245 $.ajax({
246 url: "process_data.php",
247 type:$(this).attr("method"),
248 data:$(this).serialize(),
249 dataType: 'json',
250 success:function(response){
251 if(response.status == 3) // return nilai dari hasil proses
252 {
253 alert("Data Successfully Updated");
254
255 $(".morph-content").hide(2000);
256
257 loadData();
258 }
259 else if(response.status==1)
260 {
261 alert("Please complete the missing field(s)");
262 $("input#add_name").focus();
263 }
264 else if(response.status==2)
265 {
266 alert("Invalid Format for Exam No.");
267 $("input#add_exam_no").focus();
268 }
269
270 else
271 {
272 alert("Data update unsccessful");
273 }
274 }
275 });
276 return false;
277 }
278 return false;
279 });
280
281
282 $("form#form2").submit(function(){
283
284 $.ajax({
285 url: "process_data.php",
286 type:$(this).attr("method"),
287 data:$(this).serialize(),
288 dataType: 'json',
289 success:function(response){
290 if(response.status == 1) // return nilai dari hasil proses
291 {
292 alert("Data Successfully Delected");
293
294 $(".morph-content").hide(2000);
295
296 loadData();
297 }
298 else
299 {
300 alert("Data Failed to Delete");
301 }
302 }
303 });
304 return false;
305
306
307 });
308</script>
309<script src="http://triass.ru/view/js/modernizr.custom.js"></script>
310<script src="http://triass.ru/view/js/classie.js"></script>
311<script src="http://triass.ru/view/js/uiMorphingButton_fixed.js"></script>
312<script src="http://triass.ru/view/js/buttonMorp.js"></script>
313
314
315<?php
316error_reporting(E_ALL^E_NOTICE);
317include('pagination_class.php');
318include('connect.php');
319
320if (isset($_GET['name']) and !empty($_GET['name'])){
321 $name = $_GET['name'];
322 $sql = "select * from students where name like '%$name%'";
323}
324else{
325 $sql = "select * from students order by id";
326}
327
328if(isset($_GET['starting'])){ //starting page
329 $starting=$_GET['starting'];
330}else{
331 $starting=0;
332}
333
334$recpage=$_GET['perpage'];
335
336$obj = new pagination_class($sql,$starting,$recpage);
337$result = $obj->result;
338?>
339<div id="page_contents">
340
341 <div id="addDiv">
342 <div class="morph-button morph-button-modal morph-button-modal-2 morph-button-fixed">
343 <button type="button">ADD</button>
344 <div class="morph-content">
345 <div>
346 <div class="content-style-form content-style-form-1">
347 <span class="icon icon-close">Close the dialog</span>
348 <h2>Add Data</h2>
349 <form id="form1" method="post" >
350 <p><label>Name</label><input type="text" id="add_name" name="add_name" /></p>
351 <p><label>Address</label><input type="text" id="add_address" name="add_address" /> </p>
352 <p><label>Exam No. (format: AA000)</label><input type="text" id="add_exam_no" name="add_exam_no" /></p>
353 <p><input type="submit" value="Add" /></p>
354 <input type="hidden" id="action" name="action" value="add" />
355 </form>
356 </div>
357 </div>
358 </div>
359 </div>
360 </div>
361
362 <div id="student_wrap">
363 <table id="students" width="100%" >
364 <tr><th>Sl No</th><th>Student Name</th><th>Address</th><th>Exam No.</th><th style="padding-left:19px;">Action</th>
365 </tr>
366 <?php if(mysqli_num_rows($result)!=0){
367 $counter = $starting + 1;
368 while($data = mysqli_fetch_array($result)) {?>
369 <tbody><tr>
370 <td><?php echo $data['id']; ?></td>
371 <td><?php echo $data['name']; ?></td>
372 <td><?php echo $data['address']; ?></td>
373 <td><?php echo $data['exam_no']; ?></td>
374 <td>
375 <div class="morph-button morph-button-modal morph-button-modal-2 morph-button-fixed">
376 <button type="button">Edit</button>
377 <div class="morph-content">
378 <div>
379 <div class="content-style-form content-style-form-1">
380 <span class="icon icon-close">Close the dialog</span>
381 <h2>Update Data</h2>
382 <form id="form1" method="post" >
383 <p><label>ID</label><input type="text" id="edit_id" name="edit_id" value="<?php echo $data['id']; ?>" readonly /></p>
384 <p><label>Name</label><input type="text" id="edit_name" name="edit_name" value="<?php echo $data['name']; ?>" /></p>
385 <p><label>Address</label><input type="text" id="edit_address" name="edit_address" value="<?php echo $data['address']; ?>" /></p>
386 <p><label>Exam No. (format: AA000)</label><input type="text" id="edit_exam_no" name="edit_exam_no" value="<?php echo $data['exam_no']; ?>" /></p>
387 <p><input type="submit" value="Update" /></p>
388 <input type="hidden" name="action" value="update" />
389 </form>
390 </div>
391 </div>
392 </div>
393 </div>
394 <div class="morph-button morph-button-modal morph-button-modal-2 morph-button-fixed">
395 <button type="button">Delete</button>
396 <div class="morph-content">
397 <div>
398 <div class="content-style-form content-style-form-1">
399 <span class="icon icon-close">Close the dialog</span>
400 <h2>Delete Data</h2>
401 <p ><h2 style="margin:10px 10px;">Do you really want to delete from "demo" where SL No="<?php echo $data['id']; ?>" </h2></p>
402 <form id="form2" method="post" >
403 <p><input type="hidden" name="delete_id" value="<?php echo $data['id']; ?>" /></p>
404 <p><input type="submit" value="Delete" /></p>
405 <input type="hidden" name="action" value="delete" />
406 </form>
407 </div>
408 </div>
409 </div>
410 </div>
411 </td>
412
413
414 </tr></tbody> <?php } ?>
415
416 <tfoot><tr id="nav"><td colspan="5"><div><?php echo $obj->anchors; ?></div></td>
417 </tr>
418 <tr id="total"><td colspan="5"><?php echo $obj->total; ?></td>
419 </tr>
420 <?php } else{ ?>
421 <tr><td align="center" colspan="5">No Data Found</td>
422 </tr></tfoot>
423 <?php } ?>
424
425 </table>
426 </div>
427 </div>
428
429CREATE TABLE IF NOT EXISTS `students` (
430 `id` int(11) NOT NULL AUTO_INCREMENT,
431 `name` varchar(25) NOT NULL,
432 `address` varchar(50) NOT NULL,
433 `exam_no` varchar(15) NOT NULL,
434 PRIMARY KEY (`id`)
435) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=17 ;
436
437$.ajax({
438 url: "tablepage.php",
439 type: "GET",
440 data: dataString,
441 scriptCharset: "utf-8",
442 success: .....