index.php
<html>
<head>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-table.css">
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/bootstrap-table.js"></script>
<script src="./js/bootstrap-table-zh-CN.js"></script>
</head>
<div style="width: 1000px;">
<p id="page-content" class="animated fadeInRight">
<p class="col-sm-4 col-md-3 col-lg-3" style="width: 100%;">
<form id="search_User">
<p class="panel-body search_box">
<p class="search_p">
<label for="search_name">用戶姓名：</label>
<input type="text" class="form-control" id="search_name" name="UserV2.name" >
</p>
<p class="search_p">
<label for="search_mobile">手機號：</label>
<input type="text" class="form-control" id="search_mobile" name="UserV2.phone" >
</p>
<p class="search_p">
<label for="search_sex">性別：</label>
<select class="form-control" id="search_sex" name="UserV2.sex"><option value="">---請選擇---</option><option value="男">男</option><option value="女">女</option></select>
</p>
</p>
<p class="panel-body search_box">
<p class="search_p">
<label for="search_name">用戶賬號：</label>
<input type="text" class="form-control" id="search_username" name="UserV2.username" >
</p>
<p class="search_p">
<label for="search_name">用戶Email：</label>
<input type="text" class="form-control" id="search_email" name="UserV2.email" >
</p>
<p class="search_p" style="text-align: center;">
<input type="button" class="btn btn-primary btn_search" value="搜索" onclick="serachUser()"/>
</p>
</p>
</form>
</p>
</div>
<div style="height:auto;">
<table id="userListTable" ></table>
</div>
</p>
</html>
<script>
$(function(){
var columns=[
{
checkbox: true,
align: 'center',
valign: 'middle',
},
{
title: 'ID',
field: 'id',
align: 'center',
valign: 'middle',
},
{
title: '用戶姓名',
field: 'name',
align: 'center',
valign: 'middle',
},
{
title: '性別',
field: 'sex',
align: 'center',
},
{
title: '用戶賬號',
field: 'username',
align: 'center',
},
{
title: '手機號',
field: 'phone',
align: 'center',
},
{
title: '郵箱',
field: 'email',
align: 'center',
},
{
title: '權限',
field: 'rolename',
align: 'center',
},
{
title: '操作',
field: 'id',
align: 'center',
formatter:function(value,row,index){
var e = '<button href="#" class="btn btn-primary" onclick="edit(\''+ row.id + '\')">編輯</button> ';
var d = '<button href="#" class="btn btn-danger" onclick="del(\''+ row.id +'\')">刪除</button> ';
return e+d;
}
}
];
a('./data.php',columns);
});
function a (dataurl,columns) {
$('#userListTable').bootstrapTable({
url: dataurl,
method:"post",
dataType: "json",
contentType: "application/x-www-form-urlencoded",
striped:true,//隔行變色
cache:false, //是否使用緩存
showColumns:false,// 列
// toobar:'#toolbar',
pagination: true, //分頁
paginationLoop:false,
paginationPreText:'上一頁',
paginationNextText:'下一頁',
// showFooter:true,//顯示列腳
// showRefresh:true,//顯示刷新
showPaginationSwitch:false,//是否顯示數據條數選擇框
sortable: false, //是否啟用排序
singleSelect: false,
search:false, //顯示搜索框
buttonsAlign: "right", //按鈕對齊方式
showRefresh:false,//是否顯示刷新按鈕
sidePagination: "server", //服務端處理分頁
pageNumber:1,
pageSize:5,
pageList:[5,10, 25, 50, 100],
undefinedText:'--',
uniqueId: "id", //每一行的唯一標識，一般為主鍵列
queryParamsType:'',
queryParams: queryParams,//傳遞參數（*）
columns: columns
});
//得到查詢的參數
function queryParams (params) {
var temp = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
pageSize: params.pageSize, //頁面大小
pageNumber: params.pageNumber, //頁碼
username: $("#search_username").val(),//后台請求傳的查詢參數
name:$("#search_name").val(),
sex:$("#search_sex").val(),
phone:$("#search_mobile").val(),
email:$("#search_email").val(),
};
return temp;
};
}
//搜索
function serachUser() {
$("#userListTable").bootstrapTable('refresh');
}
</script>
效果
相關資料地址：
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
http://www.php.cn/js-tutorial-362548.html