Scenario: in a list page with more contents, after using the search function of bootstrap table, select a column, click a button in this column, and jump to the details page. When we return from the details page to the table list page, because there are more contents, we want to input the search value for the first time and save it in the search box. How can we solve this problem?
<table class="table-striped table-hasthead caiwu-big-table" data-toggle="table" id="tbData" data-search="true" data-pagination="true" data-show-columns="true" data-page-size="20" data-page-list="[20, 30]"> <thead> <tr> <th data-sortable="true" data-halign="left">Supplier</th> <th data-sortable="true">Place of origin</th> <th data-sortable="true">Unit Price</th> <th data-sortable="true">Inquiry time</th> <th data-sortable="true">Term of validity</th> <th>operation</th> </tr> </thead> <tbody> <tr> <td>Supplier name 3</td> <td>Name of origin</td> <td>6000</td> <td>2018-8-1</td> <td>2018-8-9</td> <td style=""> <button class="btn btn-info btn-xs margin_r10" type="button" id="btModify" data-toggle="modal" data-target="#Mymoda "> <button class="btn btn-danger btn-xs" type="button"><i class="fa fa-remove"></i> delete</button> </td> </tr> <tr> <td>Supplier name 3</td> <td>Name of origin</td> <td>9000</td> <td>2018-8-1</td> <td>2018-8-9</td> <td style=""> <button class="btn btn-info btn-xs margin_r10" type="button" id="btModify" data-toggle="modal" data-target="#Mymoda "> <button class="btn btn-danger btn-xs" type="button" onclick="showInputVal()" ><i class="fa fa-remove"></i> link</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 = "Import.html" } </script>
It mainly uses the storage of sessionStorage objects
And bootstrap Table's resetSearch method $('(tbdata'). bootstrap Table ('resetSearch ', sessionstorageval)
WeChat public number: front-end strategy