bootstrap 多Tab 结合dataTbale ajax请求php ，刷新保持不变

2019年9月14日 84次阅读 来源: 牙小木木

想实现bootstap Tab+dataTable+ajax+php+，在ajax请求后，刷新页面后tab保持不变的简单方法。

贴图说明

《bootstrap 多Tab 结合dataTbale ajax请求php ，刷新保持不变》

《bootstrap 多Tab 结合dataTbale ajax请求php ，刷新保持不变》

参考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>';
                    }
                },
            ]
        });
    原文作者：牙小木木
    原文地址: https://segmentfault.com/a/1190000003114352
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞