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

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

<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>

<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>

<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)

 

微信公众号：前端之攻略

来源：oschina

链接：https://my.oschina.net/u/2612473/blog/2231486