文档章节

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

tianyawhl
 tianyawhl
发布于 2018/10/08 17:15
字数 476
阅读 468
收藏 0

场景:在一个内容比较多的列表页面中,使用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)

 

微信公众号:前端之攻略

© 著作权归作者所有

tianyawhl
粉丝 8
博文 261
码字总数 138286
作品 0
常州
前端工程师
私信 提问
结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程

1、bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用,整合两者可以实现我们常规的Web...

walb呀
2017/12/04
0
0
可跳转可异步的分页插件--bPage

bPage 基于jQuery、Bootstrap2、3进行开发,支持页面跳转、异步页面、异步数据等多模式的独立分页插件 插件预览效果(分页栏) 插件使用入门、API文档、使用实例 请访问 https://terryz.git...

TerryZ
2017/07/16
4.5K
6
基于 Beego 开发的后台管理系统 - gardens

gardens是基于Beego开发的易用、易扩展、界面友好的轻量级功能权限管理系统。 前端框架基于AdminLTE2进行资源整合,包含了多款优秀的插件,是笔者对多年后台管理系统开发经验精华的萃取。 本...

yunnet
2018/10/31
3.8K
0
基于Metronic的Bootstrap开发框架经验总结(16)-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理

在业务系统开发中,对表格记录的查询、分页、排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非...

walb呀
2017/12/04
0
0
推荐十个最新免费的 jQuery 表格插件

作为开发者都知道插件的重要性,有了插件的帮助,工作会更加高效。这次,我们收集了一些优秀的 jQuery 表格插件介绍给大家。 创建一个表格(table)并调整其规模,是一项艰难而繁琐的工作。作...

oschina
2015/06/10
49.8K
10

没有更多内容

加载失败,请刷新页面

加载更多

ES6

ES6:不改变原理的基础上,让API变得更简单 一、let:代替var用于声明变量 1、var的缺点: (1)声明提前 (2)没有块级作用域 2、let的优点: (1)组织了申明提前 (2)让let所在的块({}),...

wytao1995
今天
3
0
kubernetes 环境搭建 —— minikube

创建集群 minikube start 搭建好 k8s 集群后,可以查看集群的状态以及部署应用。主要用到的是 k8s 的 api,这通常需借助于 kutectl 命令行工具 基本操作 kubectl versionkubectl cluster-i...

lemos
今天
9
0
关于js混淆与反混淆还原操作

使用js的混淆加密,其目的是为了保护我们的前端代码逻辑,对应一些搞技术吃饭的公司来说,为了防止被竞争对手抓取或使用自己的代码,就会考虑如何加密,或者混淆js来达到代码保护。 1、为什么...

开源oschina
今天
11
0
用盛金公式解三次方程(ansi c版)

/* cc cubic.c -lm gcc cubic.c -lm Shengjin's Formulas Univariate cubic equation aX ^ 3 + bX ^ 2 + cX + d = 0, (a, b, c, d < R, and a!= 0). Multiple root disc......

wangxuwei
今天
9
0
JBolt开发平台入门(16)- 弹出Dialog显示指定区域的html内容

在JBolt里,有个主从表Demo。 子表中除了普通的table显示,还有其它从表显示形式 比如下方案例:是针对一个升级管理子表中存放版本的changelog富文本信息。 需求是点击左上角的弹出查看按钮,...

山东-小木
今天
45
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部