bootstrap-table表格客戶端分頁例項
阿新 • • 發佈：2019-02-10
一、前言
bootstrap-table是非常方便好用的前端表格分頁外掛，使用者只需要提供資料來源就能實現非常完美的分頁
效果，其分頁方式可以分成客戶端分頁和服務端分頁，其接收的資料來源都是json資料格式。服務端分頁在專案中
應用得非常的廣泛，但有時也需要使用客戶端分頁來加快分頁速度，加快分頁瀏覽效率。本篇部落格就不介紹服務
端分頁，只提供bootstrap-table客戶端分頁的簡單例子（資料來源也從前端獲取），供初學者瞭解使用。
二、例項
<title>bootstrap-table表格客戶端分頁</title> <link rel="stylesheet" href="./bootstrap/css/bootstrap/bootstrap.css" /> <link rel="stylesheet" href="./bootstrap-table/bootstrap-table.css" /> <script src="./jquery/jquery.min.js"></script> <script src="./bootstrap/js/bootstrap.js"></script> <script src="./bootstrap-table/bootstrap-table.js"></script> <script src="./bootstrap-table/bootstrap-table-export.js"></script> <script src="./extends/tableExport/jquery.base64.js"></script> <script src="./extends/tableExport/tableExport.js"></script> </head> <body > <div id="reportTableDiv" > <table id="reportTable"></table> </div> <script type="text/javascript"> //手動製造30條資料 var datas = []; for(var i=0;i<30;i++){ datas[i]={"name":"傻逼"+i+"號","age":"年齡："+i+"歲","sex":"男"+i} } $(function () { $('#reportTable').bootstrapTable({ method: 'get', cache: false, height: 400, striped: true, pagination: true, pageSize: 20, pageNumber:1, pageList: [10, 20, 50, 100, 200, 500], sidePagination:'client', search: true, showColumns: true, showRefresh: false, showExport: false, exportTypes: ['csv','txt','xml'], search: true, clickToSelect: true, columns: [ {field:"checked",checkbox:true}, {field:"name",title:"測試姓名",align:"center",valign:"middle",sortable:"true"}, {field:"age",title:"年齡",align:"center",valign:"middle",sortable:"true"}, {field:"sex",title:"性別",align:"center",valign:"middle",sortable:"true"}, ], data:datas, }); }); </script> <div> </body> </html>
三、總結
1. bootstrap-table客戶端分頁只需要幾個步驟即可實現：引入bootstrap的js、css；html頁面新增一個table 標籤同時給id賦值；js新增初始化程式碼； 2.bootstrap-table客戶端分頁的資料來源可以是後臺伺服器端傳遞過來（一次性獲取，即獲取所有你需要的資料），然後將sidePagination的引數修改成“client”（即客戶端分頁），去掉data，新增url，即可實現客戶端分頁；也可以是前端js獲取資料來源，該例項使用的是前端js的資料來源，初始化引數需要新增data，同時去掉url（或者將url的引數設定為空即:''）；