使用 BootstrapTable 实现数据的分页显示

时间：2024-03-07 19:30:44

使用 json 实现数据表格的分页显示。

方法一，使用 json 格式的数据，实现分页显示。

 

[html] view plain copy
 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.   
  6.     <!-- Basic -->  
  7.     <meta charset="UTF-8" />  
  8.   
  9.     <title>Dashboard | Nadhif - Responsive Admin Template</title>  
  10.   
  11.     <link rel="stylesheet" href="bootstrap.min.css">  
  12.     <link rel="stylesheet" href="bootstrap-table.css">  
  13.   
  14.     <script src="jquery.min.js"></script>  
  15.     <script src="bootstrap.min.js"></script>  
  16.     <script src="bootstrap-table.js"></script>  
  17.     <script src="bootstrap-table-zh-CN.js"></script>  
  18.   
  19. </head>  
  20.   
  21. <body>  
  22.   
  23.   
  24.   
  25. <div class="col-md-offset-3 col-md-6">  
  26.     <div class="panel panel-default">  
  27.         <div class="panel-heading">  
  28.             <h3 class="panel-title text-center">已添加教师账号</h3>  
  29.         </div>  
  30.         <div class="panel-body">  
  31.             <div id="toolbar" class="btn-group">  
  32.                 <button id="btn_edit" type="button" class="btn btn-default" >  
  33.                     <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改  
  34.                 </button>  
  35.                 <button id="btn_delete" type="button" class="btn btn-default">  
  36.                     <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除  
  37.                 </button>  
  38.             </div>  
  39.             <table id="teacher_table" data-toggle="table" data-url="data1.json" data-method="post"  
  40.                    data-query-params="queryParams"  
  41.                    data-toolbar="#toolbar"  
  42.                    data-pagination="true"  
  43.                    data-search="true"  
  44.                    data-show-refresh="true"  
  45.                    data-show-toggle="true"  
  46.                    data-show-columns="true"  
  47.                    data-page-size="5"  
  48.                    data-striped="true"  
  49.             >  
  50.                 <thead>  
  51.                 <tr>  
  52.                     <th data-field="id">用户账号</th>  
  53.                     <th data-field="name">用户密码</th>  
  54.                     <th data-field="price">教师姓名</th>  
  55.                 </tr>  
  56.                 </thead>  
  57.             </table>  
  58.         </div>  
  59.     </div>  
  60. </div>  
  61.   
  62.   
  63. <script>  
  64.     var mydata = \'{"employees":[\' +  
  65.             \'{"name":"John","pwd":"Doe","t_name":"John"},\' +  
  66.             \'{"name":"John","pwd":"Doe","t_name":"John"},\' +  
  67.             \'{"name":"John","pwd":"Doe","t_name":"John"},\' +  
  68.              \'{"name":"John","pwd":"Doe","t_name":"John"}]}\';  
  69.   
  70. //    obj = JSON.parse(txt);  
  71. //  
  72. //    document.getElementById("fname").innerHTML=obj.employees[1].firstName  
  73. //    document.getElementById("lname").innerHTML=obj.employees[1].lastName  
  74. </script>  
  75.   
  76. </body>  
  77.   
  78. </html>  

方法二，使用 json 文件和标题栏实现数据的分页显示

 

 

[html] view plain copy
 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   
  5.     <!-- Basic -->  
  6.     <meta charset="UTF-8" />  
  7.   
  8.     <title>Dashboard | Nadhif - Responsive Admin Template</title>  
  9.   
  10.     <link rel="stylesheet" href="bootstrap.min.css">  
  11.     <link rel="stylesheet" href="bootstrap-table.css">  
  12.   
  13.     <script src="jquery.min.js"></script>  
  14.     <script src="bootstrap.min.js"></script>  
  15.     <script src="bootstrap-table.js"></script>  
  16.     <script src="bootstrap-table-zh-CN.js"></script>  
  17.   
  18.   
  19. </head>  
  20. <body>  
  21.     <table id="table" data-query-params="queryParams"  
  22.            data-toolbar="#toolbar"  
  23.            data-pagination="true"  
  24.            data-search="true"  
  25.            data-show-refresh="true"  
  26.            data-show-toggle="true"  
  27.            data-show-columns="true"  
  28.            data-page-size="5"  
  29.     >  
  30.   
  31.     </table>  
  32.   
  33.   
  34.     <script>  
  35.   
  36.                 $(\'#table\').bootstrapTable({  
  37.                     url: \'data1.json\',  
  38.                     columns: [{  
  39.                         field: \'id\',  
  40.                         title: \'Item ID\'  
  41.                     }, {  
  42.                         field: \'name\',  
  43.                         title: \'Item Name\'  
  44.                     }, {  
  45.                         field: \'price\',  
  46.                         title: \'Item Price\'  
  47.                     }, ]  
  48.                 });  
  49.   
  50.         <!--$(\'#table\').bootstrapTable({-->  
  51.             <!--columns: [{-->  
  52.                 <!--field: \'id\',-->  
  53.                 <!--title: \'Item ID\'-->  
  54.             <!--}, {-->  
  55.                 <!--field: \'name\',-->  
  56.                 <!--title: \'Item Name\'-->  
  57.             <!--}, {-->  
  58.                 <!--field: \'price\',-->  
  59.                 <!--title: \'Item Price\'-->  
  60.             <!--}],-->  
  61.             <!--data: [{-->  
  62.                 <!--id: 1,-->  
  63.                 <!--name: \'Item 1\',-->  
  64.                 <!--price: \'$1\'-->  
  65.             <!--}, {-->  
  66.                 <!--id: 2,-->  
  67.                 <!--name: \'Item 2\',-->  
  68.                 <!--price: \'$2\'-->  
  69.             <!--}]-->  
  70.         <!--});-->  
  71.   
  72.     </script>  
  73.   
  74. </body>  
  75. </html>  
方式三，添加参数配置
[html] view plain copy
 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   
  5.     <!-- Basic -->  
  6.     <meta charset="UTF-8" />  
  7.   
  8.     <title>Dashboard | Nadhif - Responsive Admin Template</title>  
  9.   
  10.     <link rel="stylesheet" href="bootstrap.min.css">  
  11.     <link rel="stylesheet" href="bootstrap-table.css">  
  12.   
  13.     <script src="jquery.min.js"></script>  
  14.     <script src="bootstrap.min.js"></script>  
  15.     <script src="bootstrap-table.js"></script>  
  16.     <script src="bootstrap-table-zh-CN.js"></script>  
  17.   
  18.   
  19. </head>  
  20. <body>  
  21.   
  22. <table id="table"></table>  
  23.   
  24. <script>  
  25.   
  26.     $(\'#table\').bootstrapTable({  
  27.         url: \'data1.json\',  
  28.         queryParams:"queryParams",  
  29.         toolbar:"#toolbar",  
  30.         sidePagination:"true",  
  31.         search:"true",  
  32.         showRefresh:"true",  
  33.         showToggle:"true",  
  34.         showColumns:"true",  
  35.         pageSize:"5",  
  36.         columns: [{  
  37.             field: \'id\',  
  38.             title: \'Item ID\'  
  39.         }, {  
  40.             field: \'name\',  
  41.             title: \'Item Name\'  
  42.         }, {  
  43.             field: \'price\',  
  44.             title: \'Item Price\'  
  45.         }, ]  
  46.     });  
  47.   
  48.     <!--$(\'#table\').bootstrapTable({-->  
  49.     <!--columns: [{-->  
  50.     <!--field: \'id\',-->  
  51.     <!--title: \'Item ID\'-->  
  52.     <!--}, {-->  
  53.     <!--field: \'name\',-->  
  54.     <!--title: \'Item Name\'-->  
  55.     <!--}, {-->  
  56.     <!--field: \'price\',-->  
  57.     <!--title: \'Item Price\'-->  
  58.     <!--}],-->  
  59.     <!--data: [{-->  
  60.     <!--id: 1,-->  
  61.     <!--name: \'Item 1\',-->  
  62.     <!--price: \'$1\'-->  
  63.     <!--}, {-->  
  64.     <!--id: 2,-->  
  65.     <!--name: \'Item 2\',-->  
  66.     <!--price: \'$2\'-->  
  67.     <!--}]-->  
  68.     <!--});-->  
  69.   
  70. </script>  
  71.   
  72. </body>  
  73. </html>  

数据源

 

 

[plain] view plain copy
 
  1. [  
  2.     {  
  3.         "id": 0,  
  4.         "name": "Item 0",  
  5.         "price": "$0"  
  6.     },  
  7.     {  
  8.         "id": 1,  
  9.         "name": "Item 1",  
  10.         "price": "$1"  
  11.     },  
  12.     {  
  13.         "id": 2,  
  14.         "name": "Item 2",  
  15.         "price": "$2"  
  16.     },  
  17.     {  
  18.         "id": 3,  
  19.         "name": "Item 3",  
  20.         "price": "$3"  
  21.     },  
  22.     {  
  23.         "id": 4,  
  24.         "name": "Item 4",  
  25.         "price": "$4"  
  26.     },  
  27.     {  
  28.         "id": 5,  
  29.         "name": "Item 5",  
  30.         "price": "$5"  
  31.     },  
  32.     {  
  33.         "id": 6,  
  34.         "name": "Item 6",  
  35.         "price": "$6"  
  36.     },  
  37.     {  
  38.         "id": 7,  
  39.         "name": "Item 7",  
  40.         "price": "$7"  
  41.     },  
  42.     {  
  43.         "id": 8,  
  44.         "name": "Item 8",  
  45.         "price": "$8"  
  46.     },  
  47.     {  
  48.         "id": 9,  
  49.         "name": "Item 9",  
  50.         "price": "$9"  
  51.     },  
  52.     {  
  53.         "id": 10,  
  54.         "name": "Item 10",  
  55.         "price": "$10"  
  56.     },  
  57.     {  
  58.         "id": 11,  
  59.         "name": "Item 11",  
  60.         "price": "$11"  
  61.     },  
  62.     {  
  63.         "id": 12,  
  64.         "name": "Item 12",  
  65.         "price": "$12"  
  66.     },  
  67.     {  
  68.         "id": 13,  
  69.         "name": "Item 13",  
  70.         "price": "$13"  
  71.     },  
  72.     {  
  73.         "id": 14,  
  74.         "name": "Item 14",  
  75.         "price": "$14"  
  76.     },  
  77.     {  
  78.         "id": 15,  
  79.         "name": "Item 15",  
  80.         "price": "$15"  
  81.     },  
  82.     {  
  83.         "id": 16,  
  84.         "name": "Item 16",  
  85.         "price": "$16"  
  86.     },  
  87.     {  
  88.         "id": 17,  
  89.         "name": "Item 17",  
  90.         "price": "$17"  
  91.     },  
  92.     {  
  93.         "id": 18,  
  94.         "name": "Item 18",  
  95.         "price": "$18"  
  96.     },  
  97.     {  
  98.         "id": 19,  
  99.         "name": "Item 19",  
  100.         "price": "$19"  
  101.     },  
  102.     {  
  103.         "id": 20,  
  104.         "name": "Item 20",  
  105.         "price": "$20"  
  106.     }  
  107. ]  

相关文章