bài này sẽ hướng dẫn các bạn thực hiện cách tạo, chỉnh sửa, delete một bản ghi trong một table, ngoài ra có sử dụng thêm kỹ thuật phân trang. Tât cả sử dụng jquery và ajax để thực hiện nên website không cần phải load.
Thiết kế database
|
1 2 3 4 5 6 7 8 |
CREATE TABLE products ( pid INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(70), category VARCHAR(100), price INT, discount INT ); |
Để thực hiện bài viết này, thì chúng ta bao gồm có các file sau
- index.php
- table_data.php
- load_data.php
- live_edit_table.php
- delete_ajax.php
- db.php
- EditDeletePage.js
Những file này bạn có thể download theo đường link bên dưới mình có share.
Ở đây mình trích nội dung 2 file chính. Trong file table_data.php, file này làm nhiệm vụ bind dữ liệu ra ngoài
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<?php $query_pag_data = "SELECT pid,name,category,price,discount from products LIMIT $start, $per_page"; $result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error()); $finaldata = ""; // Table Header $tablehead="<tr><th>Product Name</th><th>Category</th><th>Price</th><th>Discount</th><th>Edit</th></tr>"; // Table Data Loop while($row = mysql_fetch_array($result_pag_data)) { $id=$row['pid']; $name=htmlentities($row['name']); $category=htmlentities($row['category']); $price=htmlentities($row['price']); $discount=htmlentities($row['discount']); $tabledata.="<tr id='$id' class='edit_tr'> <td class='edit_td' > <span id='one_$id' class='text'>$name</span> <input type='text' value='$name' class='editbox' id='one_input_$id' /> </td> <td class='edit_td' > <span id='two_$id' class='text'>$category</span> <input type='text' value='$category' class='editbox' id='two_input_$id'/> </td> <td class='edit_td' > <span id='three_$id' class='text'>$price $</span> <input type='text' value='$price' class='editbox' id='three_input_$id'/> </td> // New record <td class='edit_td' > <span id='four_$id' class='text'>$discount $</span> <input type='text' value='$discount' class='editbox' id='four_input_$id'/> </td> <td><a href='#' class='delete' id='$id'> X </a></td> </tr>"; } // Loop End $finaldata = "<table width='100%'>". $tablehead . $tabledata . "</table>"; /* Total Count for Pagination */ $query_pag_num = "SELECT COUNT(*) AS count FROM products"; $result_pag_num = mysql_query($query_pag_num); $row = mysql_fetch_array($result_pag_num); $count = $row['count']; $no_of_paginations = ceil($count / $per_page); ?> |
File thứ hai mình muốn các bạn chú ý đó là file EditdeletePage.js, file này chứa đoạn javascript cho phép chúng ta thực hiện chỉnh sửa ngay trên table mà không phải load lại trang
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
$(".edit_tr").live('click',function() { var ID=$(this).attr('id'); $("#one_"+ID).hide(); $("#two_"+ID).hide(); $("#three_"+ID).hide(); $("#four_"+ID).hide();//New record $("#one_input_"+ID).show(); $("#two_input_"+ID).show(); $("#three_input_"+ID).show(); $("#four_input_"+ID).show();//New record }).live('change',function(e) { var ID=$(this).attr('id'); var one_val=$("#one_input_"+ID).val(); var two_val=$("#two_input_"+ID).val(); var three_val=$("#three_input_"+ID).val(); var four_val=$("#four_input_"+ID).val();//New record var dataString = 'id='+ ID +'&name='+one_val+'&category='+two_val+'&price='+ three_val+'&discount='+four_val; if(one_val.length>0&& two_val.length>0 && three_val.length>0 && four_val.length>0) { $.ajax({ type: "POST", url: "live_edit_ajax.php", data: dataString, cache: false, success: function(e) { $("#one_"+ID).html(one_val); $("#two_"+ID).html(two_val); $("#three_"+ID).html(three_val); $("#four_"+ID).html(four_val);//New record e.stopImmediatePropagation(); } }); } else { alert('Enter something.'); } }); |
Ngoài ra 2 file ajax là 2 file chứa những đoạn mã ajax để thực hiện việc edit hoặc delete mà thôi.
Chúc bạn học tốt!
Bài viết được chia sẻ bởi
Sharecodeweb.net
