前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Bootstrap Table插件 页面跳转后再回来保存搜索的值

Bootstrap Table插件 页面跳转后再回来保存搜索的值

作者头像
tianyawhl
发布2019-04-04 09:58:15
1.4K0
发布2019-04-04 09:58:15
举报
文章被收录于专栏:前端之攻略前端之攻略

场景:在一个内容比较多的列表页面中,使用bootstrap table的搜索功能后,选择某列,点击此列中一个按钮,跳转到详情页,当我们从详情页返回到table列表页面中,由于内容较多,我们希望第一次输入搜索的值保存在搜索框中,该怎么解决呢?

代码语言:javascript
复制
<table class="table-striped" data-toggle="table" id="tbData" data-search="true" data-pagination="true" data-show-columns="true">
    <thead>
        <tr>
            <th data-sortable="true" data-halign="left">供应商</th>
            <th data-sortable="true">起源地</th>
            <th data-sortable="true">单价</th>
            <th data-sortable="true">询价时间</th>
            <th data-sortable="true">有效期</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>供应商名称3</td>
            <td>起源地名称</td>
            <td>6000</td>
            <td>2018-8-1</td>
            <td>2018-8-9</td>
            <td style="">
                <button class="btn btn-danger btn-xs" type="button"><i class="fa fa-remove"></i> 删除</button>
            </td>
        </tr>
        <tr>
            <td>供应商名称3</td>
            <td>起源地名称</td>
            <td>9000</td>
            <td>2018-8-1</td>
            <td>2018-8-9</td>
            <td style="">
                <button class="btn btn-danger btn-xs" type="button" onclick="showInputVal()">链接</button>
            </td>
        </tr>
    </tbody>
</table>
代码语言:javascript
复制
<script>
$(document).ready(function() {
    var height = $(window).height() - 190;
    $('#tbData').bootstrapTable('resetView', { height: height });
    window.onresize = function() {
        var height = $(window).height() - 190;
        $('#tbData').bootstrapTable('resetView', { height: height });
    }

    //$('#myModa1').modal('show');
    $(".fixed-table-container").css("padding-bottom", "40px");
    $(window).resize(function() {
        setTimeout(function() { $(".fixed-table-container").css("padding-bottom", "40px") }, 200);
        $('#tableTest1').bootstrapTable('resetView');
        $('#tableTest2').bootstrapTable('resetView');

    });
    var sessionStorageVal = sessionStorage.getItem("inputValue")
    console.log(sessionStorageVal)
    if (sessionStorageVal != "") {
        //setTimeout(function(){
        // $(".search").find("input").focus()
        // $(".search").find("input").val(localStorageVal);
        //},1000)
        $('#tbData').bootstrapTable('resetSearch', sessionStorageVal);
    }
});
</script>
代码语言:javascript
复制
<script type="text/javascript">
function showInputVal() {
    var inputValue = $(".search").find("input").val();
    console.log(inputValue)
    sessionStorage.setItem("inputValue", inputValue)
    location.href = "导入.html"
}
</script>

主要用到sessionStorage对象的存储

和bootstrap Table 的   resetSearch 方法     $('#tbData').bootstrapTable('resetSearch', sessionStorageVal)

微信公众号:前端之攻略

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018/10/08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档