首页>>分页>>jQuery Table Populator案例，点击表头排序，带搜索，无刷新分页(2016-04-19)

jQuery Table Populator案例，点击表头排序，带搜索，无刷新分页

jQuery Table Populator案例，点击表头排序，带搜索，无刷新分页
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script>  
  2.     $(document).ready(function () {  
  3.         $('#test-table').tablePopulator({  
  4.             fetch_url: "json.php",  
  5.             previous_button_selector: "#prev",  
  6.             next_button_selector: "#next",  
  7.             pagination_limit: 6,  
  8.             search_field_selector: "#search-input",  
  9.             row_mapper: function (json_element, row_element) {  
  10.                 row_element[0] = json_element.Title  
  11.                 row_element[1] = json_element.Keyword1  
  12.                 row_element[2] = json_element.Likes  
  13.             }  
  14.         });  
  15.     });  
  16.   
  17.   
  18. </script>  
XML/HTML Code
  1. <div class="search">  
  2.         <input type="text" id="search-input" placeholder="Search ..."/>  
  3.   
  4.     </div>  
  5.   
  6.     <table id="test-table" class="sticky-thead">  
  7.         <thead>  
  8.         <th data-sort-key="Title">Title</th>  
  9.         <th data-sort-key="Keyword1">Keyword1</th>  
  10.         <th data-sort-key="Likes">Likes</th>  
  11.         </thead>  
  12.         <tbody>  
  13.   
  14.         </tbody>  
  15.     </table>  
  16.     <div style="text-align:center;">  
  17.         <button id="prev">Previous</button>  
  18.         <button id="next">Next</button>  
  19.     </div>  

 

PHP Code
  1. header('Content-type:text/json');   
  2. require('../../conn.php');   
  3. $offset=$_REQUEST['skip'];//起始位置  
  4. if ($offset=="")  
  5. {  
  6.     $offset=0;  
  7. }  
  8. $pagesize=$_REQUEST['limit'];//每页数量+1  
  9. if ($pagesize=="" || $pagesize==-1)  
  10. {  
  11.     $pagesize=100000;  
  12. }  
  13. $order_by=$_REQUEST['order_by'];  
  14.   
  15. if ($order_by==""){  
  16.     $order_by="Title";  
  17. }  
  18.   
  19. $switcher=$_REQUEST['sort'];  
  20.   
  21. if ($switcher==""){  
  22.     $switcher="asc";  
  23. }  
  24.   
  25. $keywords=$_REQUEST['query'];//搜索查询  
  26.             //  
  27.   
  28.             $query_count="select count(*) from item where id>0";  
  29.             if($keywords<>""){   
  30.             $query_count.=" && Title like '%$keywords%'";  //   
  31.             }   
  32.             $rs_count=mysql_query($query_count);  
  33.             $myrow_count=mysql_fetch_array($rs_count);  
  34.             //echo $myrow_count[0];  
  35.   
  36.               
  37.             //  
  38.                 $query="select Title,Keyword1,Likes from item where id>0";  
  39.                 if($keywords<>""){   
  40.                 $query.=" && Title like '%$keywords%'";  //   
  41.                 }  
  42.                 $query.=" order by  {$order_by} {$switcher}  limit $offset,$pagesize";  
  43.                 $rs=mysql_query($query);  
  44.   
  45.                     //Add all records to an array  
  46.                     $rows = array();  
  47.                     while($row = mysql_fetch_array($rs))  
  48.                     {  
  49.                         $rows[] = $row;  
  50.                     }  
  51.               
  52.                     //Return result to jTable  
  53.                     $jTableResult= $rows;  
  54.                     print json_encode($jTableResult);  

 


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