在一页内无刷新更新数据，包括添加,删除,修改数据,更新状态 点击表头排序

在一页内无刷新更新数据，包括添加,删除,修改数据,更新状态 点击表头排序

 在一个页面内弹出层修改，刷新内容,表格可以按照列排序

演示

 

 

XML/HTML Code

1. <table width="88%" border="0" class="bidding_table">  
2.       <tr>  
3.         <td width="17%"> </th>  
4.         <td width="22%"> </th>  
5.         <td width="22%">  
6.             <span class="actionSpan">  
7.             <a href="add_form.php" title="" class="small button add" id="add_new">  
8.                 Add  
9.             </a>  
10.             </span>  
11.         </td>  
12.       </tr>  
13.       <tr>  
14.         <th width="17%" class="hover">Name</th>  
15.         <th width="22%" class="hover">Email</th>  
16.         <th width="22%">Actions</th>  
17.       </tr>  
18.       <tr>  
19.         <td colspan="3">  
20.           
21.             <ul id="sortable">  
22.               
23.             <?php  require_once('listing.php');?>  
24.               
25.             </ul>  
26.         </td>  
27.      </tr>  
28.     </table>  

 add_form.php

 

PHP Code

1. <div id="container" style="width:310px;">  
2.     <div id="faceBoxmessage" align="center">  
3.       
4.     </div>  
5.     <br clear="all" />  
6.     <form action="#" method="post" name="customForm" id="customForm" enctype="multipart/form-data"  >  
7.       
8.     <!--FORM FIELDS-->  
9.     <div align="center" id="showContent">  
10.         <span>    Name<span>*</span></span>  
11.         <input id="name" style="margin-left:20px;" name="name" type="text" value="" />  
12.     </div>  
13.       
14.     <br clear="all" />  
15.     <div align="center" id="showContent">  
16.         <span>    Email<span>*</span></span>  
17.         <input id="email" style="margin-left:20px;" name="email" type="text" value="" />  
18.     </div>  
19.     <!--FORM FIELDS-->  
20.       
21.       
22.     <br clear="all" />  
23.     <div align="center">  
24.         <input id="send_site" style="background:#CCCCCC;margin-left:20px;" name="send" type="button" οnclick="validateFrm('add');"  value="Submit" />  
25.     </div>  
26.     </form>  
27. </div>  

add_record.php

PHP Code

1. <?php  
2. if($_REQUEST)  
3. {  
4.     $email = $_REQUEST['email'];  
5.     $name  = $_REQUEST['name'];  
6.     $order = 1;  
7.       
8.     $result = @mysql_query("select max(orders) as orders from users");  
9.       
10.     if(mysql_num_rows($result) > 0)  
11.     {  
12.         while ($rows = mysql_fetch_assoc($result))  
13.         {  
14.             $order = $rows['orders'];  
15.         }  
16.         $order++;  
17.     }  
18.       
19.     $query = "insert into users (email,username,status,orders) values ('".$email."','".$name."',1,".$order.")";  
20.     $results = mysql_query( $query);  
21.     echo $results;  
22. }  
23. ?>  

 listing.php

 

PHP Code

1. <?php  
2. require "../../conn.php";  
3.   
4. if(@$_REQUEST['sort'] == 'Email')  
5. {  
6.     $orders = 'email';  
7. }  
8. else if(@$_REQUEST['sort'] == 'Name')  
9. {  
10.     $orders = 'username';  
11. }  
12. else  
13. {  
14.     $orders = 'orders';  
15.     //$orders = 'name';  
16. }  
17.   
18. $results = @mysql_query("select * from users order by ".$orders." asc");  
19.   
20. while ($rows = mysql_fetch_assoc($results))  
21. {  
22.     $checked = '';  
23.     if($rows['status'] == 1) {$status = 0; $checked = 'checked';}?>  
24.       
25.     <li class="records" id="id-<?php echo $rows['user_id'];?>" style="">  
26.         <div class="biddingList">  
27.           
28.             <!--Loader Part-->  
29.             <div class="bidDiv" style="width:30px;padding-top:6px;">  
30.                 <span id="loader-<?php echo $rows['user_id'];?>" style="display:none">  
31.                     <img src="img/load.gif" alt="" />  
32.                 </span>  
33.             </div>  
34.               
35.               
36.             <!--Fields -->  
37.             <div class="bidDiv" style="width:200px;padding-top:14px;">  
38.                 <?php echo $rows['username'];?>  
39.             </div>  
40.             <div class="bidDiv" style="width:250px;padding-top:14px;">  
41.                 <?php echo $rows['email'];?>  
42.             </div>  
43.             <!--Fields -->  
44.               
45.               
46.             <!--Action Part-->  
47.             <div class="bidDiv">  
48.               
49.                 <span class="actionSpan" id="delete-<?php echo $rows['user_id'];?>">  
50.                 <a href="#" id="delete" title="" class="small button remove">  
51.                     Remove  
52.                 </a>  
53.                 </span>  
54.                   
55.                 <span class="actionSpan">  
56.                 <a href="edit_record.php?id=<?php echo $rows['user_id'];?>" title="" class="small button update" rel="facebox">  
57.                     Update  
58.                 </a>  
59.                 </span>  
60.                   
61.                 <span class="actionSpan">  
62.                 <input type="checkbox" value="1" name="active_<?php echo $rows['user_id'];?>" id="active_<?php echo $rows['user_id'];?>" οnclick="update_status(this.id);" <?php echo $checked?> />  
63.                 </span>  
64.             </div>  
65.             <!--Action Part-->  
66.               
67.         </div>  
68.     </li>  
69. <?php  
70. }?>  
71. <script type="text/javascript">  
72. jQuery(document).ready(function($) {  
73.     $('[rel*=facebox]').facebox();  
74. });  
75. </script>  

全部文件下载地址：http://www.freejs.net/demo/285/zip.zip

原文地址:http://www.freejs.net/article_biaodan_285.html