bootstrap + bootstrap-table + jquery + bootstrap-paginator
http://127.0.0.1:8848/pangBo/index.htmljavascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="js/bootstrap-paginator.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div style="height: 138px;">
<form class="navbar-form navbar-left" role="search">
<div style="display: flex;">
<div>
<div>
<label>客户编号: </label>
<div class="form-group">
<input type="text" class="form-control" placeholder="">
</div>
</div>
<div style="margin: 10px 0px 10px 0px;">
<label>客户姓名: </label>
<div class="form-group">
<input type="text" class="form-control" placeholder="">
</div>
</div>
<div>
<label>手机号码: </label>
<div class="form-group">
<input type="text" class="form-control" placeholder="">
</div>
</div>
</div>
<div style="margin-left: 100px;">
<div>
<label>客户编号: </label>
<div class="form-group">
<input type="text" class="form-control" placeholder="">
</div>
</div>
<div style="margin: 10px 0px 10px 0px;">
<label>客户编号: </label>
<div class="form-group">
<input type="text" class="form-control" placeholder="">
</div>
</div>
<div>
<label>客户编号: </label>
<div class="form-group">
<input type="text" class="form-control" placeholder="">
</div>
</div>
</div>
<div style="margin: 88px 0px 0px 100px;">
<button type="submit" class="btn btn-default">查询</button>
</div>
</div>
</form>
</div>
<div>
<div class="btn-group" role="group" aria-label="..." style="margin: 20px 0px 0px 20px;">
<button type="button" id="btn-one" class="btn btn-default" style="border-color:#adadad;background-color:#e6e6e6;color:#333;">可撤单</button>
<button type="button" id="btn-two" class="btn btn-default">已撤单</button>
</div>
</div>
<div id="table-one" style="margin: 0px 10px 0px 20px;background: #FFFFFF;">
<table id="table"></table>
<div style="position: relative;">
<div id="example" style="text-align: center;position: absolute;right: 0px;top: 0px;">
<ul id="pageLimit"></ul>
</div>
</div>
</div>
<div id="table-two" style="margin: 0px 10px 0px 20px;display: none;background: #FFFFFF;">
<table id="table-ta-one"></table>
<div style="position: relative;">
<div id="example-two" style="text-align: center;position: absolute;right: 0px;top: 0px;">
<ul id="pageLimit-two"></ul>
</div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-title" id="myModalLabel">请输入登陆密码:</div>
</div>
<div class="modal-footer">
<div class="form-group">
<input id="input-text" type="text" value="" class="form-control" placeholder="">
</div>
<button type="button" id="btn-ok" class="btn btn-primary">肯定撤单</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
function operateFormatter(value, row, index) {
return [
'<button type="button" class="RoleOfdelete btn btn-primary btn-sm" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">撤单</button>'
].join('');
}
window.operateEvents = {
'click .RoleOfdelete': function(e, value, row, index) {
console.log('kkk');
}
};
$('#table').bootstrapTable({
url: '', //请求后台的URL（*）
method: 'GET', //请求方式（*）
// toolbar: '#toolbar', //工具按钮用哪一个容器
cache: false, //是否使用缓存，默认为true，因此通常状况下须要设置一下这个属性（*）
pagination: false, //是否显示分页（*）
// pageSize: 10, //每页的记录行数（*）
// pageNumber: 1, //初始化加载第一页，默认第一页,并记录
// sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
uniqueId: "id", //每一行的惟一标识，通常为主键列
columns: [{
field: 'id',
align: 'center',
title: '交易合同号'
},
{
field: 'ida',
align: 'center',
title: '客户编号'
},
{
field: 'idb',
align: 'center',
title: '客户姓名'
},
{
field: 'idc',
align: 'center',
title: '手机号码'
},
{
field: 'idd',
align: 'center',
title: '证件号码'
},
{
field: 'ide',
align: 'center',
title: '产品代码'
},
{
field: 'idf',
align: 'center',
title: '产品名称'
},
{
field: 'idg',
align: 'center',
title: '购买金额'
},
{
field: 'idh',
align: 'center',
title: '交易时间'
},
{
field: 'idi',
align: 'center',
title: '撤单',
events: operateEvents,
formatter: operateFormatter
},
],
data: [{
id: 1
},
{
id: 1
},
{
id: 1
}
],
onLoadError: function() {
showTips("数据加载失败！");
},
});
$('#table-ta-one').bootstrapTable({
url: '', //请求后台的URL（*）
method: 'GET', //请求方式（*）
// toolbar: '#toolbar', //工具按钮用哪一个容器
cache: false, //是否使用缓存，默认为true，因此通常状况下须要设置一下这个属性（*）
pagination: false, //是否显示分页（*）
// pageSize: 10, //每页的记录行数（*）
// pageNumber: 1, //初始化加载第一页，默认第一页,并记录
// sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
uniqueId: "id", //每一行的惟一标识，通常为主键列
columns: [{
field: 'id',
align: 'center',
title: '交易合同号'
},
{
field: 'ida',
align: 'center',
title: '客户编号'
},
{
field: 'idb',
align: 'center',
title: '客户姓名'
},
{
field: 'idc',
align: 'center',
title: '手机号码'
},
{
field: 'idd',
align: 'center',
title: '证件号码'
},
{
field: 'ide',
align: 'center',
title: '产品代码'
},
{
field: 'idf',
align: 'center',
title: '产品名称'
},
{
field: 'idg',
align: 'center',
title: '购买金额'
},
{
field: 'idh',
align: 'center',
title: '交易时间'
}
],
data: [{
id: 1
},
{
id: 1
},
{
id: 1
}
],
onLoadError: function() {
showTips("数据加载失败！");
},
});
$('#btn-one').click(function() {
console.log('kk');
$('#table-one').show();
$('#table-two').hide();
$('#btn-one').css({
'background-color': '#e6e6e6'
})
})
$('#btn-two').click(function() {
console.log('kkk');
$('#table-two').show();
$('#table-one').hide();
$('#btn-one').css({
'background-color': '#FFF'
})
})
$('#pageLimit').bootstrapPaginator({
currentPage: 1, //当前的请求页面。
totalPages: 100, //一共多少页。
size: "normal", //应该是页眉的大小。
bootstrapMajorVersion: 3, //bootstrap的版本要求。
alignment: "right",
numberOfPages: 5, //一页列出多少数据。
itemTexts: function(type, page, current) { //以下的代码是将页眉显示的中文显示咱们自定义的中文。
switch (type) {
case "first":
return "首页";
case "prev":
return "上一页";
case "next":
return "下一页";
case "last":
return "末页";
case "page":
return page;
}
}
});
$('#pageLimit-two').bootstrapPaginator({
currentPage: 1, //当前的请求页面。
totalPages: 100, //一共多少页。
size: "normal", //应该是页眉的大小。
bootstrapMajorVersion: 3, //bootstrap的版本要求。
alignment: "right",
numberOfPages: 5, //一页列出多少数据。
itemTexts: function(type, page, current) { //以下的代码是将页眉显示的中文显示咱们自定义的中文。
switch (type) {
case "first":
return "首页";
case "prev":
return "上一页";
case "next":
return "下一页";
case "last":
return "末页";
case "page":
return page;
}
}
});
$('#btn-ok').click(function() {
var inputContent = $('#input-text').val();
if (inputContent == '') {
alert('密码不能为空 !');
}
console.log(inputContent);
})
</script>