<html>
<head>
<title>Bootstrap 实例 - 面包屑导航</title>
<link href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"> </script>
</head>
<body>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">2013</a></li>
<li class="active">十一月</li>
</ol>
</body>
</html>
小例子效果如下:
jsp页面
<head>
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<div class="col-xs-10">
<section class="panel panel-default panel-201905302052">
<header class="panel-heading">
<div class="input-group pull-right input-group-201905310851" id="search">
<input type="text" placeholder="请输入关键字..." id="searchNameAccept">
<span class="input-group-btn">
<button class="btn" type="button"id="search_data_all">查询</button>
</span>
<span class="input-group-btn">
<button class="btn" type="button" id="reset_data">重置</button>
</span>
</div>
<ul class="nav nav-pills pull-left nav-pills-201905302053" id="xuanze">
<li class="active">
<a href="#ts-1" data-toggle="pill">待审核的资源申请</a>
</li>
<li class>
<a href="#ts-2" data-toggle="pill">已处理的资源申请</a>
</li>
</ul>
</header>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="ts-1">
<table class="table table-201905310828" id="table-list">
<thead>
<tr class="active">
<th class="text-center">资源名称</th>
<th class="text-center">资源提供方</th>
<th class="text-center">资源类型</th>
<th class="text-center">资源使用方</th>
<th class="text-center">应用系统</th>
<th class="text-center">申请时间</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="tab-pane fade " id="ts-2">
<table class="table table-201905310828" id="table-list-resource">
<thead>
<tr class="active">
<th class="text-center">资源名称</th>
<th class="text-center">资源提供方</th>
<th class="text-center">资源类型</th>
<th class="text-center">资源使用方</th>
<th class="text-center">应用系统</th>
<th class="text-center">申请时间</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</section>
</div>
js:
$(function(){
serviceApplyInit();
$("body").on("click",".panel-heading .nav-pills-201905302053>li",function() {
var count = $(this).index();
if(count==0){//待审核
$("#searchNameAccept").val("");
serviceApplyInit();
}else if(count==1) {//已处理
$("#searchNameAccept").val("");
resAppliedInit();
}
});
})function serviceApplyInit(){}
function resAppliedInit(){}
$(function(){
serviceApplyInit();
$("body").on("click",".panel-heading .nav-pills-201905302053>li",function() {
var count = $(this).index();
if(count==0){//待审核
$("#searchNameAccept").val("");
serviceApplyInit();
}else if(count==1) {//已处理
$("#searchNameAccept").val("");
resAppliedInit();
}
});
})
function serviceApplyInit() {
$("#table-list").dataTable().fnDestroy();
var grid = new Datatable();
grid.init({
src: $("#table-list"),
onSuccess: function(grid) {},
onError: function(grid) {},
dataTable: {
"retrieve": true,
"columns": [
{
"data": "resource_name",
"bSortable": false,
"sClass":"text-center"
},
{
"data": "org_name",
"bSortable": false,
"sClass":"text-center"
},
{
"data": "type",
"bSortable": false,
"sClass":"text-center"
},
{
"data": "dept",
"bSortable": false,
"sClass":"text-center"
},
{
"data": "system_type",
"bSortable": false,
"sClass":"text-center"
},
{
"data": "create_time",
"bSortable": false,
//"sWidth":"150px",
"sClass":"text-center"
},
{
"data": "resource_id",
"bSortable": false,
"sClass":"text-center",
}
],
"columnDefs": [
{
"targets": [0],
"render": function(data, type, full) {
var text = "<span>"+data+"</span>";
if(full.alert_id&&full.alert_id!=''){
text = "<i class='fa fa-bell-o' style='color:red;'></i>"+data;
}
if(full.type == 'service') {
return "<a target=\"_blank\" href='#'>"+text+"</a>";
}else if(full.type == 'table'){
return "<a target=\"_blank\" href='#' >"+text+"</a>";
}else if(full.type == 'file'){
return "<a target=\"_blank\" href='#'>"+text+"</a>";
}else if(full.type == 'folder'){
return "<a target=\"_blank\" href='#'>"+text+"</a>";
}
return data;
}
},
{
"targets": [1],
"render": function(data, type, full) {
if(data) {
return "<span title='"+data+"'>"+data+"</span>";
} else {
return "--";
}
}
},
{
"targets": [2],
"render": function(data, type, full) {
var text = "";
if(data=="table"){
text = "库表";
}else if(data=="file"){
text = "文件";
}else if(data=="folder"){
text = "文件夹";
}else if(data=="service"){
text = "服务接口";
}else{
text = "--";
}
return text;
}
},
{
"targets": [3],
"render": function(data, type, full) {
if(data){
return "<span title='"+data+"'>"+data+"</span>";
}
else{
return "<span title='"+full.apply_org_name+"'>"+full.apply_org_name+"</span>";
}
}
},
{
"targets": [4],
"render": function(data, type, full) {
if(data == 1){
if(typeof(full.system_name) == "undefined"){
return "";
}
else{
return "<span title='"+full.system_name+"'>"+full.system_name+"</span>";
}
}else if(data == 2){
return "<span title='测试'>测试</span>";
}else if(data == 3){
return "<span title='人工校验'>人工校验</span>";
}else{
return "";
}
}
},
{
"targets": [5],
"render": function(data, type, full) {
return formatTimes(data,'yyyy-MM-dd');
}
},
{
"targets": [6],
"render": function(data, type, full) {
if(full.status == '6')
{
if(full.has_condition == '1' )
{
return '<a href="javascript:;" class="js-approval" data-status="' + full.status + '" data-applyid="' + full.id + '" data-type="' + full.type + '">受理</a>';
}
else if(full.has_condition == '0' )
{
return '<a href="javascript:;" class="js-approval" data-status="' + full.status + '" data-applyid="' + full.id + '" data-type="' + full.type + '">受理并审核</a>';
}
}
else
{
return '<a href="javascript:;" class="js-approval" data-status="' + full.status + '" data-applyid="' + full.id + '" data-type="' + full.type + '">审核</a>';
}
}
}
],
"pageLength": 10,
"bProcessing":true,
"ajax": {
"url": getRootPath() + "/usercenter/ResourceApply.do?method=GetResApplyEGov",
'data' : function (d) {
d.searchName=$("#searchNameAccept").val();
},
type:"post"
},
scrollX:true,
scrollCollapse:true,
fixedColumns:{
leftColumns:0,
rightColumns:1
}
}
});
$("#search_data_all").click(function() {
grid.submitFilter();
});
$('#searchNameAll').keydown(function(event){
if(event.keyCode==13){
grid.submitFilter();
}
});
//增加重置按钮
$("#reset_data").click(function(){
$("#searchNameAccept").val('');
$("#table-list").DataTable().ajax.reload();
});
};
var appliedGrid = new Datatable();
function resAppliedInit() {
$("#table-list-resource").dataTable().fnDestroy();
appliedGrid.init({
src: $("#table-list-resource"),
onSuccess: function(appliedGrid) {},
onError: function(appliedGrid) {},
dataTable: {
"retrieve": true,
"columns": [
{
"data": "resource_name",
"bSortable": false,
"sClass":"text-center"
},
{
"data": "org_name",
"bSortable": false,
"sClass":"text-center"
},
{
"data": "type",
"bSortable": false,
"sClass":"text-center"
},
{
"data": "dept",
"bSortable": false,
"sClass":"text-center"
},
{
"data": "system_type",
"bSortable": false,
"sClass":"text-center"
},
{
"data": "create_time",
"bSortable": false,
"sClass":"text-center"
//"sWidth":"80px"
},
{
"data": "id",
"bSortable": false,
"sClass":"text-center",
// "sWidth":"11%"
}
],
"columnDefs": [
{
"targets": [0],
"render": function(data, type, full) {
var text = "<span>"+data+"</span>";
if(full.type == 'service') {
return "<a target=\"_blank\" href='#'>"+text+"</a>";
}else if(full.type == 'table'){
return "<a target=\"_blank\" href='#'>"+text+"</a>";
}else if(full.type == 'file'){
return "<a target=\"_blank\" href='#'>"+text+"</a>";
}else if(full.type == 'folder'){
return "<a target=\"_blank\" href='#'>"+text+"</a>";
}
return data;
}
},
{
"targets": [1],
"render": function(data, type, full) {
if(data) {
return "<span title='"+data+"'>"+data+"</span>";
} else {
return "--";
}
}
},
{
"targets": [2],
"render": function(data, type, full) {
var text = "";
if(data=="table"){
text = "库表";
}else if(data=="file"){
text = "文件";
}else if(data=="folder"){
text = "文件夹";
}else if(data=="service"){
text = "服务接口";
}else{
text = "--";
}
return text;
}
},
{
"targets": [3],
"render": function(data, type, full) {
if(data){
return "<span title='"+data+"'>"+data+"</span>";
}
else{
return "<span title='"+full.apply_org_name+"'>"+full.apply_org_name+"</span>";
}
}
},
{
"targets": [4],
"render": function(data, type, full) {
if(data == 1){
if(typeof(full.system_name) == "undefined"){
return "";
}
else{
return "<span title='"+full.system_name+"'>"+full.system_name+"</span>";
}
}else if(data == 2){
return "<span title='测试'>测试</span>";
}else if(data == 3){
return "<span title='人工校验'>人工校验</span>";
}else{
return "";
}
}
},
{
"targets": [5],
"render": function(data, type, full) {
return formatTimes(data,"yyyy-MM-dd");
}
},
{
"targets": [6],
"render": function(data, type, full) {
var content = "";
content = '<a href="javascript:void(0);" data-applyid="'+full.id+'" class="show-opinion" title="资源申请信息">查看详情</a>';
// if(full.status == '9')
// {
// content += "<a href='#' class='cancel-apply' data-status='" + full.status + "' data-applyid='" + full.id + "' data-type='" + full.type + "'>收回授权</a>";
// }
return content;
}
}
],
"pageLength": 10,
"bProcessing":true,
"ajax": {
"url": getRootPath() + "/usercenter/ResourceApply.do?method=GetHandledServiceList",
'data' : function (d) {
d.title=$('#searchNameAccept').val();
},
type:"post"
},
scrollX:true,
scrollCollapse:true,
fixedColumns:{
leftColumns:0,
rightColumns:1
}
}
});
$("#search_data_all").click(function() {
appliedGrid.submitFilter();
});
//增加重置按钮
$("#reset_data").click(function(){
$("#searchNameAccept").val('');
$("#table-list-resource").DataTable().ajax.reload();
});
/* //加载优化滚动条
$('#table-resApplied_wrapper .dataTables_scrollBody').niceScroll({
cursorwidth: 10,
cursoropacitymin:0.2,
cursorcolor:'#ccc',
cursorborder:'none',
cursorborderradius: 10
});
$(window).resize(function () {
$('#table-resApplied_wrapper .dataTables_scrollBody').getNiceScroll().resize();
});*/
}