bootstrap-table的入门使用——从服务器获取数据

参考: Bootstrap Table 查询(服务器端)、刷新数据

这里需要使用 bootstrap-table 插件。使用了CSS3loader显示加载过程。

效果如下:


index.html

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Refresh from url after use data option</title>  
  5.     <meta charset="utf-8">  
  6.     <link rel="stylesheet" href="bootstrap.min.css">  
  7.     <link rel="stylesheet" href="bootstrap-table.min.css">  
  8.     <script src="jquery.min.js"></script>  
  9.     <script src="bootstrap.min.js"></script>  
  10.     <script src="bootstrap-table.min.js"></script>  
  11.   
  12.     <link rel="stylesheet" href="CSS3loader/loaders.css">  
  13.   
  14.     <style>  
  15.         div.loader .loader-inner {  
  16.             position: absolute;  
  17.             left: 50%;  
  18.             margin: 20px 0 50px -76px;  
  19.   
  20.             text-align: center;  
  21.         }  
  22.         div.loader>.ball-pulse>div {  
  23.             background-color: #2f96b4;  
  24.         }  
  25.     </style>  
  26. </head>  
  27. <body>  
  28. <div class="container">  
  29.     <h1>Refresh from url after use data option(<a href="https://github.com/wenzhixin/bootstrap-table/issues/137" target="_blank">#137</a>).</h1>  
  30.     <p><button id="button" class="btn btn-default">Refresh from url</button></p>  
  31.     <table id="table" class="table table-bordered">  
  32.         <thead>  
  33.         <tr>  
  34.             <th data-field="id">ID</th>  
  35.             <th data-field="name">Item Name</th>  
  36.             <th data-field="active">Item Price</th>  
  37.             <th data-field="user_id">Item Price</th>  
  38.             <th data-field="no_of_reports">Item Price</th>  
  39.         </tr>  
  40.         </thead>  
  41.     </table>  
  42. </div>  
  43. <script>  
  44.     $(function () {  
  45.         var $table = $('#table');  
  46.         //$table.bootstrapTable({data:[]});  
  47.   
  48.         $.ajax({  
  49.             url: 'index.php',  
  50.             type: 'post',  
  51.             dataType: 'json',  
  52.             beforeSend: function () {  
  53.                 $('#table').append('<div class="loader"><div class="loader-inner ball-pulse"><div></div><div></div><div></div></div></div>');  
  54.             },  
  55.             success: function (d) {  
  56.                 setTimeout(function () {  
  57.                     $('#table>div.loader').remove();  
  58.                     $table.bootstrapTable({  
  59.                         data: d  
  60.                     });  
  61.                 }, 2000);  
  62.             }  
  63.         });  
  64.   
  65.         /*$table.bootstrapTable({  
  66.             data: [{  
  67.                 "id": 0,  
  68.                 "name": "Item 0",  
  69.                 "active": 0,  
  70.                 "user_id": 0,  
  71.                 "no_of_reports": 0  
  72.             }]  
  73.         });*/  
  74.         $('#button').click(function () {  
  75.             $table.bootstrapTable('refresh', {url: 'index.php'});  
  76.         });  
  77.     });  
  78. </script>  
  79. </body>  
  80. </html>  


index.php

  1. <?php  
  2. /** 
  3.  * Created by PhpStorm. 
  4.  * User: DreamBoy 
  5.  * Date: 2016/6/1 
  6.  * Time: 10:16 
  7.  */  
  8.   
  9. $res = array(  
  10.     array('id' => 33, 'name' => '444''active' => 0, 'user_id' => 1, 'no_of_reports' => 0),  
  11.     array('id' => 29, 'name' => 'AAA''active' => 1, 'user_id' => 1, 'no_of_reports' => 0),  
  12.     array('id' => 20, 'name' => 'aasdasd''active' => 1, 'user_id' => 1, 'no_of_reports' => 0)  
  13. );  
  14.   
  15. echo json_encode($res);  


升级版(新增排序功能+

bootstrapTable('destroy')
的使用):

index.html

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Refresh from url after use data option</title>  
  5.     <meta charset="utf-8">  
  6.     <link rel="stylesheet" href="bootstrap.min.css">  
  7.     <link rel="stylesheet" href="bootstrap-table.min.css">  
  8.     <script src="jquery.min.js"></script>  
  9.     <script src="bootstrap.min.js"></script>  
  10.     <script src="bootstrap-table.min.js"></script>  
  11.   
  12.     <link rel="stylesheet" href="CSS3loader/loaders.css">  
  13.   
  14.     <style>  
  15.         div.loader .loader-inner {  
  16.             position: absolute;  
  17.             left: 50%;  
  18.             margin: 20px 0 50px -76px;  
  19.   
  20.             text-align: center;  
  21.         }  
  22.         div.loader>.ball-pulse>div {  
  23.             background-color: #2f96b4;  
  24.         }  
  25.     </style>  
  26. </head>  
  27. <body>  
  28. <div class="container">  
  29.     <h1>Refresh from url after use data option(<a href="https://github.com/wenzhixin/bootstrap-table/issues/137" target="_blank">#137</a>).</h1>  
  30.     <p><button id="button" class="btn btn-default">Refresh from url</button></p>  
  31.     <table id="table" class="table table-hover" data-classes="table table-hover"  
  32.            data-striped="true"  data-sort-name="stargazers_count"  
  33.            data-sort-order="desc">  
  34.         <thead>  
  35.         <tr>  
  36.             <th data-field="id" data-sortable="true">ID</th>  
  37.             <th data-field="name" data-sortable="true">Item Name</th>  
  38.             <th data-field="active">Item Price</th>  
  39.             <th data-field="user_id">Item Price</th>  
  40.             <th data-field="no_of_reports">Item Price</th>  
  41.         </tr>  
  42.         </thead>  
  43.     </table>  
  44. </div>  
  45. <script>  
  46.     $(function () {  
  47.         var $table = $('#table');  
  48.         $table.bootstrapTable({data:[]});  
  49.   
  50.         $.ajax({  
  51.             url: 'index.php',  
  52.             type: 'post',  
  53.             dataType: 'json',  
  54.             beforeSend: function () {  
  55.                 $('#table').append('<div class="loader"><div class="loader-inner ball-pulse"><div></div><div></div><div></div></div></div>');  
  56.             },  
  57.             success: function (d) {  
  58.                 setTimeout(function () {  
  59.                     $('#table>div.loader').remove();  
  60.                     /*$table.bootstrapTable({  
  61.                         data: d  
  62.                     });*/  
  63.   
  64.                     $table.bootstrapTable('destroy').bootstrapTable({  
  65.                         data: d  
  66.                     });  
  67.                 }, 2000);  
  68.             }  
  69.         });  
  70.   
  71.         /*$table.bootstrapTable({  
  72.             data: [{  
  73.                 "id": 0,  
  74.                 "name": "Item 0",  
  75.                 "active": 0,  
  76.                 "user_id": 0,  
  77.                 "no_of_reports": 0  
  78.             }]  
  79.         });*/  
  80.         $('#button').click(function () {  
  81.             $table.bootstrapTable('refresh', {url: 'index.php'});  
  82.         });  
  83.     });  
  84. </script>  
  85. </body>  
  86. </html>  


版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_15096707/article/details/51554190
阅读更多
上一篇spring boot pagehelper(2)
下一篇Bootstrap Select使用
想对作者说点什么? 我来说一句

服务器获取数据,上传数据

2013年04月01日 1.67MB 下载

没有更多推荐了,返回首页

关闭
关闭