看完上篇博客相信看完你对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>
edit.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>
<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
<!-- leyer -->
<script type="text/javascript" src="js/plugins/layer/layer.min.js" ></script>
<script type="text/javascript">
/**
* 从url获取参数
* @param {Object} $
*/
(function ($) {
$.getUrlParam = function (name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
})(jQuery);
//alert($.getUrlParam('id'));
$("#close").on('click', function(){
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
});
//
var typelook = $.getUrlParam("type");
//初始化数据
initData();
if(typelook){
$("#submit").hide();
$("input").attr('disabled',true);
$("select").attr('disabled',true);
$('#close').attr('disabled', false);
}
function initData(){
var id = $.getUrlParam('id');
var name = $.getUrlParam('name');
var price = $.getUrlParam('price');
$('#id').val(id);
$('#name').val(id);
$('#price').val(id);
}
$(function(){
});
</script>
</body>
</html>
bootstrapTable可以自定义ajax方法，通过ajax请求获得数据返回展示在bootstrapTable表格中
bootstrapTable自定义ajax方法 https://blog.csdn.net/csdnluolei/article/details/84191733
版权声明：本文为csdnluolei原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。