BootstrapTable-加载数据
生活随笔
收集整理的這篇文章主要介紹了
BootstrapTable-加载数据
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
要加載的數據：https://examples.wenzhixin.net.cn/examples/bootstrap_table/data?search=&order=asc&offset=0&limit=10
代碼
<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><title>Table</title><!--jquery--><script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script><!--bootstrap--><link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script><script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script><!--bootstrap-table--><link href="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.js"></script><!--bootstrap-table-lanuage--><script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table-locale-all.min.js"></script> </head> <body> <div class="container"><div class="select"><select class="form-control" id="locale"><option value="zh-CN" selected>zh-CN</option><option value="zh-TW">zh-TW</option><option value="en-US">en-US</option></select></div><div><table id="table"></table></div> </div> <script>var $table = $('#table');var datas = [];$(function () {$.ajax({url: "https://examples.wenzhixin.net.cn/examples/bootstrap_table/data?search=&order=asc&offset=0&limit=10",success: function (d) {if (d) {datas = d.rows;// 初始化表格 initTable();}}});});$('#locale').change(initTable);function initTable() {// 先銷毀再創建 $table.bootstrapTable('destroy').bootstrapTable({data: datas,// 表格數據 locale: $('#locale').val(),// 語言 classes: 'table table-bordered table-hover table-striped', // 樣式，table-striped 隔行變色 columns: [ // 列詳情 {title: 'ID',// 表頭字段名 field: 'id',// 數據 key sortable: true,// 排序 align: 'center',// 居中 }, {title: 'Item Name',field: 'name',align: 'center'}, {title: 'Item Price',field: 'price',align: 'center',formatter: function (value, row, index) { // 處理該行數據if (value == '$0') {return "haha!"} else {return value;}}}]});} </script> </body> </html>結果
?
例子：https://examples.bootstrap-table.com/#welcome.html
API：https://bootstrap-table.com/docs/api/table-options/
轉載于:https://www.cnblogs.com/jhxxb/p/10785218.html
總結
以上是生活随笔為你收集整理的BootstrapTable-加载数据的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 未完全关闭数据库导致ORA-01012:
- 下一篇： MapReduce-TextInputF