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

时间:2022-06-19
本文章向大家介绍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)

微信公众号:前端之攻略