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>
相關文章
- 1. bootstrapTable
- 2. bootstrapTable mergeCells
- 3. Bootstrap分頁插件--Bootstrap Paginator
- 4. BootstrapTable入門Demo
- 5. bootstrapTable入門demo
- 6. bootstrapTable分頁
- 7. ****-BootStrapTable表格利器通用教材-Bootstrap
- 8. Jquery、Bootstrap
- 9. BootstrapTable使用實例
- 10. bootstrapTable數據導出爲excel
- 更多相關文章...
- • jQuery Mobile 安裝 - jQuery Mobile 教程
- • jQuery Mobile 過渡 - jQuery Mobile 教程
- • Github 簡明教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
