想实现bootstap Tab+dataTable+ajax+php+,在ajax请求后,刷新页面后tab保持不变的简单方法。
贴图说明
参考html代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min-v3.0.0.css">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.min-v3.0.0.js"></script>
<script>
$(document).ready(function() {
if(location.hash) {
$('a[href=' + location.hash + ']').tab('show');
}
$(document.body).on("click", "a[data-toggle]", function(event) {
location.hash = this.getAttribute("href");
});
});
$(window).on('popstate', function() {
var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");
$('a[href=' + anchor + ']').tab('show');
});
</script>
</head>
<body>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#profile">Profile</a></li>
<li><a data-toggle="tab" href="#messages">Messages</a></li>
<li><a data-toggle="tab" href="#settings">Settings</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">home</div>
<div class="tab-pane" id="profile">profile</div>
<div class="tab-pane" id="messages">messages</div>
<div class="tab-pane" id="settings">settings</div>
</div>
</body>
</html>
资源请自行下载。最重要的是href属性。
参考dataTable初始化:注意是return 的href='#zd-group'
tableObjg = $('#group_list_table').dataTable({
destroy: true,
"language": {
"url": "http://xxx/js/datatable-zh.js"
},
"ajax": {
"url": "/field/groupListHandle",
"type": "POST"
},
"columns": [
{"data": "group_name"},
{
"orderable": false,
"name": "id",
"data": "id",
"render": function (data) {
return '<a href="#zd-group" data-toggle="modal" data-target="#editorgroupModal" onclick="editGroup(' + data + ')" class="adis"> <i class="fa fa-pencil"></i> 编辑</a><a href="#zd-group" class="adis" onclick="deleteGroup(' + data + ')"><i class="fa fa-trash-o"></i> 删除分组</a>';
}
},
]
});