bootstrap-table表格用戶端分頁執行個體

一、前言

1.使用bootstrap-table表格插件,隻要有json資料格式的資料源,即可随心所欲

2.本部落格隻展示了前端分頁執行個體(PS:該插件兩種分頁方式:前端分頁、服務端分頁)

3.廢話不多說,執行個體開始

二、執行個體demo

1.引入資源部分

<script src="http://code.jquery.com/jquery-latest.js"></script>  
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" target="_blank" rel="external nofollow"  integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">  
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css" target="_blank" rel="external nofollow" >  
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>  
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>  
           

2.html+js

<table id="table"></table>    
        <script type="text/javascript">    
        //沒有請求,自己寫50條資料    
        var datas  = [];    
        for(var i=0;i<50;i++){    
            datas[i]={"name":i+"号","age":i+"歲"}    
        }    
            $('#table').bootstrapTable({    
                pagination: true,    
                pageSize: 20,    
                pageNumber:1,    
                sidePagination:'client',  
                paginationFirstText: "首頁",  
                paginationPreText: "上一頁",  
                paginationNextText: "下一頁",  
                paginationLastText: "末頁",  
                iconSize: 'pager',  
                columns: [{field:"name",title:"編号",align:"center",valign:"middle",sortable:"true"},    
                {field:"age",title:"年齡",align:"center",valign:"middle",sortable:"true"}],    
                data:datas,    
            });                                               
        </script>    
           

三.總結

demo可适用于本地加載資料(即前端擷取資料來源後在進行加載),當然,擷取到的資料源格式要為json資料格式哦!切忌

好久沒系統的引用這個插件了,這次來複習下,demo簡單但實用

PS:好緊張好緊張,第一次來分享姿勢~~