bootstrapTable分頁
阿新 • • 發佈:2018-12-18
看完上篇部落格相信看完你對bootstrapTable的使用也有了進一步的認識,我們來看看bootstrapTable是怎麼分頁的
先看頁面
程式碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>bootstrap-table-demo</title> <!-- 引入bootstrap樣式 --> <link rel="stylesheet" href="css/bootstrap.min.css" /> <!-- 引入bootstrap-table樣式 --> <link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css" /> <!-- layer --> <link rel="stylesheet" href="js/plugins/layer/skin/layer.css" /> <style type="text/css"> .form-inline .form-group input[type=text], .form-inline .form-group select{ width:120px; } </style> </head> <body style="width: 90%;margin: 0 auto;"> <h2>bootstrap-table</h2> <form id="form1" action="" method="get" class="form-inline"> <div class="form-group"> <label class="control-label ">ID:</label> <input type="text" id="id" class="form-control" name="id" /> </div> <div class="form-group"> <label class="control-label ">Name:</label> <input type="text" id="name" class="form-control" name="name" /> </div> <div class="form-group"> <label class="control-label ">Price:</label> <!--<input type="text" id="price" class="form-control" name="price" />--> <select class="form-control" id="price" name="price"> <option value="0">請選擇</option> <option value="1">$1</option> <option value="2">$2</option> <option value="3">$3</option> <option value="4">$4</option> </select> </div> <input type="submit" class="btn btn-primary" value="搜尋"/> </form> <br/> <div id="toolbar" class="btn-group"> <button class="btn btn-success" id="add">新增</button> <button class="btn btn-warning" id="edit">編輯</button> <button class="btn btn-info" id="look">檢視</button> <button class="btn btn-danger" id="remove">刪除</button> </div> <!--bootstrap-table表格--> <table id="table" data-toolbar="#toolbar" data-toggle="table" data-search="false" data-side-pagination="client" data-pagination="true" data-click-to-select="true" data-single-select="true" data-page-size= "3" > <thead style="background:#efefef;"> <tr> <th data-checkbox="true"></th> <th data-field="id">ID</th> <th data-field="name">Name</th> <th data-field="price">Price</th> </tr> </thead> </table> <!-- jquery --> <script type="text/javascript" src="js/jquery.min.js" ></script> <!-- bootstrap --> <script type="text/javascript" src="js/bootstrap.min.js" ></script> <!-- bootstrap-table --> <script type="text/javascript" src="js/plugins/bootstrap-table/bootstrap-table.min.js" ></script> <!-- 引入中文語言包 --> <script type="text/javascript" src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js" ></script> <!-- layer --> <script type="text/javascript" src="js/plugins/layer/layer.min.js" ></script> <script type="text/javascript"> var $table = $("#table"); $(function(){ //$table.bootstrapTable('load', [{"id": 1,"name": "Item 0","price": "$0"}]); load(); }); //載入資料 function load(){ var params = [{"id": 1,"name": "Item 1","price": "$1"}, {"id": 2,"name": "Item 2","price": "$1"}, {"id": 3,"name": "Item 3","price": "$2"}, {"id": 4,"name": "Item 4","price": "$3"}, {"id": 5,"name": "Item 5","price": "$3"},{"id": 6,"name": "Item 6","price": "$2"}, {"id": 7,"name": "Item 7","price": "$1"},{"id": 8,"name": "Item 8","price": "$4"}, {"id": 9,"name": "Item 9","price": "$3"},{"id": 10,"name": "Item 10","price": "$4"}, {"id": 11,"name": "Item 11","price": "$2"},{"id": 12,"name": "Item 12","price": "$3"}]; console.log(params) $table.bootstrapTable('load', params); } /** * 獲得選中的 */ function getIdSelections() { return $.map($table.bootstrapTable('getSelections'), function(row) { return row.id; }); } //重新整理 $("#btnRefresh").on('click', function(){ $table.bootstrapTable('refresh'); //$("#btnRefresh").hide(); }); //新增 $("#add").on('click', function(){ //$("#btnRefresh").prop('disabled', true); //$("#btnRefresh").hide(); layer.open({ type: 2, title: '新增商品', shadeClose: false, shade: 0.8, area: ['50%', '60%'], content: 'add.html' }); }); //檢視 $("#look").on('click', function(){ var ids = getIdSelections(); //alert(ids); layer.open({ type: 2, title: '檢視商品', shadeClose: false, shade: 0.8, area: ['50%', '60%'], content: 'edit.html?id=' + ids+'&type=look' }); }); //編輯 $("#edit").on('click', function(){ var ids = getIdSelections(); //alert(ids); layer.open({ type: 2, title: '編輯商品', shadeClose: false, shade: 0.8, area: ['50%', '60%'], content: 'edit.html?id=' + ids }); }); //刪除 $("#remove").on('click', function(){ var ids = getIdSelections(); layer.confirm('您是否要刪除當前 ' + ids.length + '條資料?', { btn: ['是', '否'] }, function() { del(ids); }); }); /** * 刪除 * @param {Object} ids */ function del(ids){ layer.msg('刪除成功'); } </script> </body> </html>
add.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>新增客戶</title> <!-- 引入bootstrap樣式 --> <link rel="stylesheet" href="css/bootstrap.min.css" /> <!-- 引入bootstrap-table樣式 --> <link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css" /> <style type="text/css"> .form-group{ width:90%; margin: 15px auto; } </style> </head> <body> <div> <form id="form1" action="" method="get" class=""> <div class="form-group"> <label class="control-label ">ID:</label> <input type="text" id="id" class="form-control" name="id" /> </div> <div class="form-group"> <label class="control-label ">Name:</label> <input type="text" id="name" class="form-control" name="name" /> </div> <div class="form-group"> <label class="control-label ">Price:</label> <!--<input type="text" id="price" class="form-control" name="price" />--> <select class="form-control" id="price" name="price"> <option value="0">請選擇</option> <option value="1">$1</option> <option value="2">$2</option> <option value="3">$3</option> <option value="4">$4</option> </select> </div> <div class="form-group"> <input type="submit" id="submit" class="btn btn-primary" style="width: 25%;" value="新增"/> <input type="button" id="close" class="btn btn-danger" style="width: 25%;" value="關閉"/> </div> </form> </div> <!-- jquery --> <script type="text/javascript" src="js/jquery.min.js" ></script> <!-- bootstrap --> <script type="text/javascript" src="js/bootstrap.min.js" ></script> <script type="text/javascript"> $("#close").on('click', function(){ var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); }); </script> </body> </html>