首页>>表单>>jQuery无刷新翻页，更改排序，同时带添加，修改，删除数据(2013-12-17)

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

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

jQuery无刷新翻页，更改排序，同时带添加，修改，删除数据
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

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