表格外掛-bootstrap table的使用示例
阿新 • • 發佈：2018-12-10
基於 Bootstrap 的 jQuery 表格外掛，通過簡單的設定，就可以擁有強大的單選、多選、排序、分頁，以及編輯、匯出、過濾（擴充套件）等等的功能。
1：在官網上下載相關的檔案之後，步驟下載之後引入：
<!-- 引入的css檔案 --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <link href="bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet"> <!-- 引入的js檔案 --> <script src="jquery/jquery.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script src="bootstrap-table/dist/bootstrap-table.min.js"></script> <script src="bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
2：開始寫程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 引入的css檔案 --> <link href="css/bootstrap.min.css" rel="stylesheet" /> <link href="css/bootstrap-table.min.css" rel="stylesheet"> <title></title> </head> <body> <table id="mytable"></table> </body> <!-- 引入的js檔案 --> <script src="js/jquery-1.9.1.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-table.min.js"></script> <script src="js/bootstrap-table-zh-CN.min.js"></script> <script> $('#mytable').bootstrapTable({ columns: [{ field: 'id', title: '編號名' }, { field: 'name', title: '姓名' }, { field: 'photo', title: '聯絡方式' }], data: [{ id: 1, name: '王小婷', photo: '1373717324' }, { id: 2, name: '安安', photo: '131313' }] }); </script> </html>
3：效果如下：
另外一種方法：通過url請求本地json格式資料
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 引入的css檔案 --> <link href="css/bootstrap.min.css" rel="stylesheet" /> <link href="css/bootstrap-table.min.css" rel="stylesheet"> <title></title> </head> <body> <table id="mytable"></table> </body> <!-- 引入的js檔案 --> <script src="js/jquery-1.9.1.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-table.min.js"></script> <script src="js/bootstrap-table-zh-CN.min.js"></script> <script> $('#mytable').bootstrapTable({ url: '1.json', columns: [{ field: 'id', title: '編號' }, { field: 'name', title: '姓名' }, { field: 'photo', title: '聯絡' }, ] }); </script> </html>
json:
[
{ "id":"1",
"name":"王小婷",
"photo":"1234567"
},
{
"id":"1",
"name":"安安",
"photo":"42353473"
}
]
表格如下：
下一篇：
表格外掛-bootstrap table的分頁的實現使用示例
原文作者：祈澈姑娘 技術部落格：https://www.jianshu.com/u/05f416aefbe1
90後前端妹子，愛程式設計，愛運營，愛折騰。 堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。