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)
微信公众号:前端之攻略
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- jQuery通过Ajax实现请求后台接口数据
- Git常规操作
- 手把手教你,嘴对嘴传达 ----源码编译安装部署LAMP平台(LAMP平台与编译安装详解,Apache,MySQL与PHP源码编译安装,LAMP平台搭建论坛)
- Vue点击切换样式
- ElementUI引入到vue项目开发
- 手把手教你,嘴对嘴传达------Apache(安全优化防盗链、隐藏版本信息)
- spring框架应用系列三:切面编程(带参数)
- 排障集锦:九九八十一难之第六难!(98)Address already in use: AH00072: make_sock: could not bind to address ::80
- Vue页面中引用自定义组件
- Vue如何引用Vant组件
- js表单验证工具包
- 手把手教你,嘴对嘴传达------Nginx网站服务(访问状态统计,基于域名,端口,IP的虚拟web主机访问)
- lib-flexible引入到Vue做移动端rem布局
- 微信小程序引入VantWeapp开发
- 手把手教你,嘴对嘴传达------源码编译LNMP部署及应用 , 手动搭建discuz论坛