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)

 

微信公衆號：前端之攻略