<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>bootstrap</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="bootstrap-3.4.1/css/bootstrap.min.css" rel="external nofollow" >
<link rel="stylesheet" href="bootstrap-table-1.19.0/bootstrap-table.css" rel="external nofollow" >
<link rel="stylesheet" href="bootstrap-table-1.19.0/bootstrap-table-pagejump.css" rel="external nofollow" >
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<style>
.table-green {
color: #042cff;
background-color: #84f1cd;
border-color: #84f1cd;
}
/*定义类名为.thead-blue的样式*/
.thead-blue th{
color: #666;
background-color: #CEEEFB;
border-color: #CEEEFB;
/* height:52px;
line-height:52px;
padding-bottom: 20px; */
}
</style>
</head>
<body>
<table id="userTable" style="text-align: center;font-size: 14px;margin: auto;word-wrap:break-word; word-break:break-all" >
</table>
<script src="jQuery/jquery-3.6.0.min.js"></script>
<script src="bootstrap-3.4.1/js/bootstrap.min.js"></script>
<script src="bootstrap-table-1.19.0/bootstrap-table.js"></script>
<script src="bootstrap-table-1.19.0/bootstrap-table-pagejump.js"></script>
<script src="bootstrap-table-1.19.0/bootstrap-table-zh-CN.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
$(function () {
//初始化表格
var oTable = new TableInit();
oTable.Init();
});
function TableInit() {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#userTable').bootstrapTable({
url: 'json.json', //请求后台的URL（*）
method: 'get', //请求方式（*）GET POST
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortOrder: "asc", //排序方式
queryParamsType: '',
dataType: 'json',
paginationShowPageGo: true,
showJumpto: true,
pageNumber: 1, //初始化加载第一页，默认第一页
queryParams: queryParams,//请求服务器时所传的参数
sidePagination: 'server',//指定服务器端分页
pageSize: 10,//单页记录数
pageList: [10, 20, 30, 40],//分页步进值
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
silent: true,
showRefresh: false, //是否显示刷新按钮
showToggle: false,
minimumCountColumns: 2, //最少允许的列数
uniqueId: "id", //每一行的唯一标识，一般为主键列
theadClasses: "thead-blue",//设置thead-blue为表头样式
classes: "table table-bordered table-striped table-hover table-condensed",
//rowStyle:rowStyle,//通过自定义函数设置行样式
paginationLoop:true,//分页连续循环
paginationParts:['pageInfo', 'pageSize', 'pageList'], //pageInfo,pageInfoShort
columns: [{
checkbox: false,
visible: false
}, {
field: 'id',
title: '序号',
align: 'center',
// formatter: function (value, row, index) {
// return index + 1;
// }
},
{
field: 'pName',
title: '产品名称',
align: 'center',
// width: '230px'
},
{
field: 'pCreateDate',
title: '年份',
align: 'center'
}, {
field: 'numIssues',
title: '期数',
align: 'center'
}, {
field: 'editeTime',
title: '编辑时间',
align: 'center'
},
{
field: 'operation',
title: '操作',
align: 'center',
//events: operateEvents,//给按钮注册事件
formatter: addFunctionAlty//表格中增加按钮
}],
responseHandler: function (res) { //后台返回的结果
console.log(res);
if(res.code == "OK"){
var userInfo = res.data;
var NewData = [];
if (userInfo.length) {
for (var i = 0; i < userInfo.length; i++) {
var dataNewObj = {
'id': '',
"pName": '',
'pCreateDate': '',
"numIssues": '',
'editeTime': '',
'status': ''
};
dataNewObj.id = userInfo[i].id;
dataNewObj.pName = userInfo[i].pName;
dataNewObj.pCreateDate = userInfo[i].pCreateDate.replace(/-/g,'/');
dataNewObj.numIssues = userInfo[i].numIssues;
dataNewObj.editeTime = userInfo[i].editeTime.replace(/-/g,'/');
dataNewObj.status = userInfo[i].status;
NewData.push(dataNewObj);
}
console.log(NewData)
}
var data = {
total: res.total,
rows: NewData
};
return data;
}
}
});
};
// 得到查询的参数
function queryParams(params) {
var pName = $("#keyWord").val();
console.log(pName);
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
pageNum: params.pageNumber,
pageSize: params.pageSize,
pName: pName
};
return JSON.stringify(temp);
}
return oTableInit;
}
// 表格中按钮
function addFunctionAlty(value, row, index) {
var btnText = '';
btnText += "<button type=\"button\" id=\"btn_download" + row.id + "\" οnclick=\"downloadPPT(" + "'" + row.id + "'" + ")\" class=\"btn-g\">下载</button> ";
return btnText;
}
function rowStyle(row, index) {
var style = {};
style={css:{'background-color':'#EAEBEF','color':'#FFF'}};
if (index % 2 === 0) {
style={css:{'background-color':'#FFF','color':'#666'}};
}
return style;
}
//刷新表格
function getUserList() {
$("#userTable").bootstrapTable('refresh');
}
</script>
</body>
</html>
bootstrap和jQuery做带分页跳转的表格实例
需积分: 23 189 浏览量
2022-03-31
16:03:22
上传
评论
收藏 546KB ZIP 举报
bootstrap和jQuery做带分页跳转的表格实例.zip （28个子文件） 
jQuery 
jquery.min.js 82KB jquery-3.6.0.min.js 87KB json.json 3KB bootstrap-table-1.19.0 bootstrap-table.css 10KB bootstrap-table.js 264KB bootstrap-table-pagejump.js 2KB bootstrap-table-zh-CN.min.js 10KB bootstrap-table.min.css 9KB bootstrap-table.min.js 119KB bootstrap-table-pagejump.css 898B bootstrap-table-zh-CN.js 27KB bootstrap-3.4.1 css bootstrap-theme.css 25KB bootstrap.css.map 382KB bootstrap.min.css 119KB bootstrap-theme.min.css.map 74KB bootstrap.css 143KB bootstrap-theme.min.css 23KB bootstrap-theme.css.map 47KB bootstrap.min.css.map 528KB fonts glyphicons-halflings-regular.woff 23KB glyphicons-halflings-regular.woff2 18KB glyphicons-halflings-regular.ttf 44KB glyphicons-halflings-regular.eot 20KB
glyphicons-halflings-regular.svg 106KB js npm.js 484B bootstrap.min.js 39KB bootstrap.js 74KB
bootstrap.html 7KB
评论0