jQuery无刷新翻页，更改排序，同时带添加，修改，删除数据

jQuery无刷新翻页，更改排序，同时带添加，修改，删除数据

 本例用到的js库请到演示页面

演示

• 
  

 

XML/HTML Code

1. <div id="PeopleTableContainer" style="width: 600px;"></div>  

 

JavaScript Code

1. <script type="text/javascript">  
2.   
3.         $(document).ready(function () {  
4.   
5.             //Prepare jTable  
6.             $('#PeopleTableContainer').jtable({  
7.                 title: 'Table of people',  
8.                 paging: true,  
9.                 pageSize: 3,  
10.                 sorting: true,  
11.                 defaultSorting: 'Name ASC',  
12.                 actions: {  
13.                     listAction: 'PersonActionsPagedSorted.php?action=list',  
14.                     createAction: 'PersonActionsPagedSorted.php?action=create',  
15.                     updateAction: 'PersonActionsPagedSorted.php?action=update',  
16.                     deleteAction: 'PersonActionsPagedSorted.php?action=delete'  
17.                 },  
18.                 fields: {  
19.                     PersonId: {  
20.                         key: true,  
21.                         create: false,  
22.                         edit: false,  
23.                         list: false  
24.                     },  
25.                     Name: {  
26.                         title: 'Author Name',  
27.                         width: '40%'  
28.                     },  
29.                     Age: {  
30.                         title: 'Age',  
31.                         width: '20%'  
32.                     },  
33.                     RecordDate: {  
34.                         title: 'Record date',  
35.                         width: '30%',  
36.                         type: 'date',  
37.                         create: false,  
38.                         edit: false  
39.                     }  
40.                 }  
41.             });  
42.   
43.             //Load person list from server  
44.             $('#PeopleTableContainer').jtable('load');  
45.   
46.         });  
47.   
48.     </script>  
49.    

 PersonActions.php

 

PHP Code

1. <?php  
2.   
3. try  
4. {  
5.     include("../../conn.php");  
6.   
7.     //Getting records (listAction)  
8.     if($_GET["action"] == "list")  
9.     {  
10.         //Get record count  
11.         $result = mysql_query("SELECT COUNT(*) AS RecordCount FROM people;");  
12.         $row = mysql_fetch_array($result);  
13.         $recordCount = $row['RecordCount'];  
14.   
15.         //Get records from database  
16.         $result = mysql_query("SELECT * FROM people ORDER BY " . $_GET["jtSorting"] . " LIMIT " . $_GET["jtStartIndex"] . "," . $_GET["jtPageSize"] . ";");  
17.           
18.         //Add all records to an array  
19.         $rows = array();  
20.         while($row = mysql_fetch_array($result))  
21.         {  
22.             $rows[] = $row;  
23.         }  
24.   
25.         //Return result to jTable  
26.         $jTableResult = array();  
27.         $jTableResult['Result'] = "OK";  
28.         $jTableResult['TotalRecordCount'] = $recordCount;  
29.         $jTableResult['Records'] = $rows;  
30.         print json_encode($jTableResult);  
31.     }  
32.     //Creating a new record (createAction)  
33.     else if($_GET["action"] == "create")  
34.     {  
35.         //Insert record into database  
36.         $result = mysql_query("INSERT INTO people(Name, Age, RecordDate) VALUES('" . $_POST["Name"] . "', " . $_POST["Age"] . ",now());");  
37.           
38.         //Get last inserted record (to return to jTable)  
39.         $result = mysql_query("SELECT * FROM people WHERE PersonId = LAST_INSERT_ID();");  
40.         $row = mysql_fetch_array($result);  
41.   
42.         //Return result to jTable  
43.         $jTableResult = array();  
44.         $jTableResult['Result'] = "OK";  
45.         $jTableResult['Record'] = $row;  
46.         print json_encode($jTableResult);  
47.     }  
48.     //Updating a record (updateAction)  
49.     else if($_GET["action"] == "update")  
50.     {  
51.         //Update record in database  
52.         $result = mysql_query("UPDATE people SET Name = '" . $_POST["Name"] . "', Age = " . $_POST["Age"] . " WHERE PersonId = " . $_POST["PersonId"] . ";");  
53.   
54.         //Return result to jTable  
55.         $jTableResult = array();  
56.         $jTableResult['Result'] = "OK";  
57.         print json_encode($jTableResult);  
58.     }  
59.     //Deleting a record (deleteAction)  
60.     else if($_GET["action"] == "delete")  
61.     {  
62.         //Delete from database  
63.         $result = mysql_query("DELETE FROM people WHERE PersonId = " . $_POST["PersonId"] . ";");  
64.   
65.         //Return result to jTable  
66.         $jTableResult = array();  
67.         $jTableResult['Result'] = "OK";  
68.         print json_encode($jTableResult);  
69.     }  
70.   
71.     //Close database connection  
72.       
73.   
74. }  
75. catch(Exception $ex)  
76. {  
77.     //Return error message  
78.     $jTableResult = array();  
79.     $jTableResult['Result'] = "ERROR";  
80.     $jTableResult['Message'] = $ex->getMessage();  
81.     print json_encode($jTableResult);  
82. }  
83.       
84. ?>  

 

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