bootstrap-table的使用与条件搜索

最新推荐文章于 2024-04-03 03:18:31 发布
最新推荐文章于 2024-04-03 03:18:31 发布
阅读量2.5k 收藏 1
点赞数 1
分类专栏： bootstrap-table 文章标签： bootstrap-table 插件 jsp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31165799/article/details/70889299
版权

一、下载插件

链接地址： 下载地址，进入后直接点击下载源码即可。

二、导入jsp中

将源码包解压：将dist目录下的bootstrap-table.min.css和bootstrap-table.min.js，以及表格汉化dist/local目录下的

bootstrap-table-zh-CN.min.js文件导入项目。


jsp页面导入：


<link rel="stylesheet" type="text/css" href="${basePath}/Css/bootstrap-table.min.css" />
<script type="text/javascript" src="${basePath}/Js/bootstrap-table.min.js"></script>

三、body

只有一个form表单用来添加查询条件，一个table用来装载填充数据。

<body>
<form class="form-inline definewidth m20" action="" method="get">
    <div class="form-group">
        <label for="sysCode">系统编号：</label>
        <select name="sysCode" id="sysCode" class="form-control">
           <option value="">所有</option>
           <option value="pms">PMS</option>
           <option value="cyt">畅游通</option>
        </select>    

        <label for="channelCode">渠道名称：</label>
        <select name="channelCode" id="channelCode" class="form-control">
           <option value="">所有</option>
           <option value="502">九寨沟</option>
           <option value="520">青都</option>
        </select><br><br>

        <%--用户ID：--%>
        <input type="text" name="userId" id="userId"class="abc input-default" placeholder="这里输入用户编号">    

        <%--请求路径：--%>
        <input type="text" name="reqUrl" id="reqUrl"class="abc input-default" placeholder="这里输入请求路径">    

        <%--会话ID：--%>
        <input type="text" name="sessionId" id="sessionId"class="abc input-default" placeholder="这里输入会话ID">    

        <button type="button" οnclick="reloadTable()" class="btn btn-primary">查询</button>
    </div>
</form>
<table id="table"></table>
</body>

三、script或者说JS

这里就是来把数据填充到table里面的。属性意思可以去查看 官方文档，有很详细的说明，建议自己对着看，能学的深刻点，不容易忘。reloadTable方法里面是重新加载填充table。 

<script>
        var oTableInit = new Object();
        var $table = $('#table');
        oTableInit.Init = $(function() {
            // bootstrap table初始化
            $table.bootstrapTable({
                method:"get",
                url: '${basePath}/optManage/findOptRecordList',
                //data:'${basePath}/data.json',
                queryParams:oTableInit.queryParams,
                striped: true,
                search: false,
                cache:false,
                dataType:'json',
                showRefresh: true,
                showColumns: true,
                showToggle:true,
                showPaginationSwitch:true,
                minimumCountColumns: 2,
                clickToSelect: true,
                detailView: true,
               // detailFormatter:'detailFormatter',
               detailFormatter: function(index, row) {
                    var html = '';
                    $.each(row, function(key, val){
                        html += "<p class='text-info'>" + key + ":" + val +"</p>"
                    });
                    return html;
                },
                pagination: true,
                pageNumber:1,
                pageSize:10,
                paginationLoop: false,
                pageList: [10, 25, 50, 100],
                sidePagination: 'server',
                silentSort: false,
                smartDisplay: false,
                escape: true,
                idField: 'id',
                /*    sortName: 'channelName',
                 sortOrder: 'desc',*/
                maintainSelected: true,
                toolbar: '#toolbar',
                columns: [
                    {field: 'id', title:'编号',align:'center'},
                    {field: 'sysCode', title: '系统编号',align:'center'},
                    {field: 'channelCode', title: '渠道编号',visible: false,align:'center'},
                    {field: 'channelName', title: '渠道名称',align:'center'},
                    {field: 'terminalName', title: '终端',align:'center'},
                    {field: 'sessionId', title: '会话id',align:'center'},
                    {field: 'reqParams', title: '请求参数',align:'center'},
                    {field: 'reqUrl', title: '请求URL',align:'center'},
                    {field: 'userId', title: '用户编号',align:'center'},
                    {field: 'sceneNo', title: '场景号',visible: false,align:'center'},
                    {field: 'reqMethodName', title: '请求动作',align:'center'},
                    {field: 'optBrief', title: '操作简介',align:'center'},
                    {field: 'optTime', title: '操作时间',align:'center'},
                    {field: 'optDescription', title: '操作描述',visible: false,align:'center'},
                    {field: 'ip', title: 'IP',align:'center'},
                    {field: 'clientIp', title: 'clientIP',visible: false,align:'center'},
                    {field: 'mac', title: '物理地址',visible: false,align:'center'},
                    {field: 'imei', title: 'imei',visible: false,align:'center'},
                    {field: 'operators', title: '操作用户',visible: false,align:'center'},
                    {field: 'manufacturer', title: '提供商',visible: false,align:'center'},
                    {field: 'phoneModel', title: '手机类型',align:'center'},
                    {field: 'computerName', title: '电脑名称',align:'center'},
                    {field: 'os', title: '操作系统',align:'center'},
                    {field: 'osVersion', title: '操作系统版本',align:'center'},
                    {field: 'resolution', title: '布局',visible: false,align:'center'},
                    {field: 'font', title: '字体',visible: false,align:'center'},
                    {field: 'fontSize', title: '字体大小',visible: false,align:'center'},
                    {field: 'browser', title: '浏览器',align:'center'},
                    {field: 'browserVersion', title: '浏览器版本',align:'center'},
                    {field: 'appName', title: 'app名称',visible: false,align:'center'},
                    {field: 'appType', title: 'app类型',visible: false,align:'center'},
                    {field: 'appVersion', title: 'app版本',visible: false,align:'center'},
                    {field: 'longitude', title: '经度',visible: false,align:'center'},
                    {field: 'latitude', title: '纬度',visible: false,align:'center'},
                    {field: 'internetType', title: '网络类型',visible: false,align:'center'},
                    {field: 'isEmulator', title: '是否支持虚拟机',visible: false,align:'center'},
                    {field: 'deviceId', title: '设备编号',visible: false,align:'center'}
                ]
            });
        });
        oTableInit.queryParams = function (params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一致
                limit: params.limit,   //页面大小
                offset: params.offset,  //页码
                sysCode: $("#sysCode").val(),
                channelCode: $("#channelCode").val(),
                //terminalName: $("#terminalName").val(),
                //sceneNo: $("#sceneNo").val(),
                userId: $("#userId").val(),
                sessionId: $("#sessionId").val(),
                reqUrl: $("#reqUrl").val()
            };
            return temp;
        };


        function reloadTable() {
            $table.bootstrapTable('refresh');
        }

</script>

四、后台控制层

查询数据库得到需要展示的数据。

    @ResponseBody
    @RequestMapping(value = "/findOptRecordList",method = RequestMethod.GET)
    public Object findOptRecordList(Integer offset,Integer limit,String order,String userId,String sysCode,String channelCode,String channelName,String terminalName,String sessionId,String reqUrl,String sceneNo) {
        int pageNo = 1;
        if(offset != null) {
            pageNo = (offset/limit +1);
        }

        PageInfo<OptRecordAndEnvVO> pageInfo = optManageService.findOptRecordAndEnvListPage(pageNo,limit,userId,sysCode,channelCode,channelName,terminalName,sessionId,reqUrl,sceneNo);
        Map<String,Object> resultMap = new HashMap<>();
        resultMap.put("rows",pageInfo.getList());
        resultMap.put("total",pageInfo.getTotal());
        return resultMap;
    }
PageInfo实体类（分页对象），应该不用注释了，见名思意就行了。 
package com.github.pagehelper;

import com.github.pagehelper.Page;
import java.io.Serializable;
import java.util.Collection;
import java.util.List;

public class PageInfo<T> implements Serializable {
    private static final long serialVersionUID = 1L;
    private int pageNum;
    private int pageSize;
    private int size;
    private int startRow;
    private int endRow;
    private long total;
    private int pages;
    private List<T> list;
    private int prePage;
    private int nextPage;
    private boolean isFirstPage;
    private boolean isLastPage;
    private boolean hasPreviousPage;
    private boolean hasNextPage;
    private int navigatePages;
    private int[] navigatepageNums;
    private int navigateFirstPage;
    private int navigateLastPage;

    public PageInfo() {
        this.isFirstPage = false;
        this.isLastPage = false;
        this.hasPreviousPage = false;
        this.hasNextPage = false;
    }

    public PageInfo(List<T> list) {
        this(list, 8);
    }

    public PageInfo(List<T> list, int navigatePages) {
        this.isFirstPage = false;
        this.isLastPage = false;
        this.hasPreviousPage = false;
        this.hasNextPage = false;
        if(list instanceof Page) {
            Page page = (Page)list;
            this.pageNum = page.getPageNum();
            this.pageSize = page.getPageSize();
            this.pages = page.getPages();
            this.list = page;
            this.size = page.size();
            this.total = page.getTotal();
            if(this.size == 0) {
                this.startRow = 0;
                this.endRow = 0;
            } else {
                this.startRow = page.getStartRow() + 1;
                this.endRow = this.startRow - 1 + this.size;
            }
        } else if(list instanceof Collection) {
            this.pageNum = 1;
            this.pageSize = list.size();
            this.pages = 1;
            this.list = list;
            this.size = list.size();
            this.total = (long)list.size();
            this.startRow = 0;
            this.endRow = list.size() > 0?list.size() - 1:0;
        }

        if(list instanceof Collection) {
            this.navigatePages = navigatePages;
            this.calcNavigatepageNums();
            this.calcPage();
            this.judgePageBoudary();
        }

    }

    private void calcNavigatepageNums() {
        int startNum;
        if(this.pages <= this.navigatePages) {
            this.navigatepageNums = new int[this.pages];

            for(startNum = 0; startNum < this.pages; ++startNum) {
                this.navigatepageNums[startNum] = startNum + 1;
            }
        } else {
            this.navigatepageNums = new int[this.navigatePages];
            startNum = this.pageNum - this.navigatePages / 2;
            int endNum = this.pageNum + this.navigatePages / 2;
            int i;
            if(startNum < 1) {
                startNum = 1;

                for(i = 0; i < this.navigatePages; ++i) {
                    this.navigatepageNums[i] = startNum++;
                }
            } else if(endNum > this.pages) {
                endNum = this.pages;

                for(i = this.navigatePages - 1; i >= 0; --i) {
                    this.navigatepageNums[i] = endNum--;
                }
            } else {
                for(i = 0; i < this.navigatePages; ++i) {
                    this.navigatepageNums[i] = startNum++;
                }
            }
        }

    }

    private void calcPage() {
        if(this.navigatepageNums != null && this.navigatepageNums.length > 0) {
            this.navigateFirstPage = this.navigatepageNums[0];
            this.navigateLastPage = this.navigatepageNums[this.navigatepageNums.length - 1];
            if(this.pageNum > 1) {
                this.prePage = this.pageNum - 1;
            }

            if(this.pageNum < this.pages) {
                this.nextPage = this.pageNum + 1;
            }
        }

    }

    private void judgePageBoudary() {
        this.isFirstPage = this.pageNum == 1;
        this.isLastPage = this.pageNum == this.pages;
        this.hasPreviousPage = this.pageNum > 1;
        this.hasNextPage = this.pageNum < this.pages;
    }

    public int getPageNum() {
        return this.pageNum;
    }

    public void setPageNum(int pageNum) {
        this.pageNum = pageNum;
    }

    public int getPageSize() {
        return this.pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public int getSize() {
        return this.size;
    }

    public void setSize(int size) {
        this.size = size;
    }

    public int getStartRow() {
        return this.startRow;
    }

    public void setStartRow(int startRow) {
        this.startRow = startRow;
    }

    public int getEndRow() {
        return this.endRow;
    }

    public void setEndRow(int endRow) {
        this.endRow = endRow;
    }

    public long getTotal() {
        return this.total;
    }

    public void setTotal(long total) {
        this.total = total;
    }

    public int getPages() {
        return this.pages;
    }

    public void setPages(int pages) {
        this.pages = pages;
    }

    public List<T> getList() {
        return this.list;
    }

    public void setList(List<T> list) {
        this.list = list;
    }

    /** @deprecated */
    @Deprecated
    public int getFirstPage() {
        return this.navigateFirstPage;
    }

    /** @deprecated */
    @Deprecated
    public void setFirstPage(int firstPage) {
        this.navigateFirstPage = firstPage;
    }

    public int getPrePage() {
        return this.prePage;
    }

    public void setPrePage(int prePage) {
        this.prePage = prePage;
    }

    public int getNextPage() {
        return this.nextPage;
    }

    public void setNextPage(int nextPage) {
        this.nextPage = nextPage;
    }

    /** @deprecated */
    @Deprecated
    public int getLastPage() {
        return this.navigateLastPage;
    }

    /** @deprecated */
    @Deprecated
    public void setLastPage(int lastPage) {
        this.navigateLastPage = lastPage;
    }

    public boolean isIsFirstPage() {
        return this.isFirstPage;
    }

    public void setIsFirstPage(boolean isFirstPage) {
        this.isFirstPage = isFirstPage;
    }

    public boolean isIsLastPage() {
        return this.isLastPage;
    }

    public void setIsLastPage(boolean isLastPage) {
        this.isLastPage = isLastPage;
    }

    public boolean isHasPreviousPage() {
        return this.hasPreviousPage;
    }

    public void setHasPreviousPage(boolean hasPreviousPage) {
        this.hasPreviousPage = hasPreviousPage;
    }

    public boolean isHasNextPage() {
        return this.hasNextPage;
    }

    public void setHasNextPage(boolean hasNextPage) {
        this.hasNextPage = hasNextPage;
    }

    public int getNavigatePages() {
        return this.navigatePages;
    }

    public void setNavigatePages(int navigatePages) {
        this.navigatePages = navigatePages;
    }

    public int[] getNavigatepageNums() {
        return this.navigatepageNums;
    }

    public void setNavigatepageNums(int[] navigatepageNums) {
        this.navigatepageNums = navigatepageNums;
    }

    public int getNavigateFirstPage() {
        return this.navigateFirstPage;
    }

    public int getNavigateLastPage() {
        return this.navigateLastPage;
    }

    public void setNavigateFirstPage(int navigateFirstPage) {
        this.navigateFirstPage = navigateFirstPage;
    }

    public void setNavigateLastPage(int navigateLastPage) {
        this.navigateLastPage = navigateLastPage;
    }

    public String toString() {
        StringBuffer sb = new StringBuffer("PageInfo{");
        sb.append("pageNum=").append(this.pageNum);
        sb.append(", pageSize=").append(this.pageSize);
        sb.append(", size=").append(this.size);
        sb.append(", startRow=").append(this.startRow);
        sb.append(", endRow=").append(this.endRow);
        sb.append(", total=").append(this.total);
        sb.append(", pages=").append(this.pages);
        sb.append(", list=").append(this.list);
        sb.append(", prePage=").append(this.prePage);
        sb.append(", nextPage=").append(this.nextPage);
        sb.append(", isFirstPage=").append(this.isFirstPage);
        sb.append(", isLastPage=").append(this.isLastPage);
        sb.append(", hasPreviousPage=").append(this.hasPreviousPage);
        sb.append(", hasNextPage=").append(this.hasNextPage);
        sb.append(", navigatePages=").append(this.navigatePages);
        sb.append(", navigateFirstPage").append(this.navigateFirstPage);
        sb.append(", navigateLastPage").append(this.navigateLastPage);
        sb.append(", navigatepageNums=");
        if(this.navigatepageNums == null) {
            sb.append("null");
        } else {
            sb.append('[');

            for(int i = 0; i < this.navigatepageNums.length; ++i) {
                sb.append(i == 0?"":", ").append(this.navigatepageNums[i]);
            }

            sb.append(']');
        }

        sb.append('}');
        return sb.toString();
    }
}
加一段service的代码... 

public PageInfo<OptRecordAndEnvVO> findOptRecordAndEnvListPage(Integer pageNo, Integer pageSize, String userId, String sysCode,
        String channelCode,String channelName, String terminalName, String sessionId, String reqUrl, String sceneNo) {
        List<OptRecordAndEnvVO> list = optRecordAndEnvDAO.findOptRecordListPage(pageNo,pageSize,userId,sysCode,channelCode,channelName,
            terminalName,sessionId,reqUrl,sceneNo);
        return new PageInfo<>(list);
}
以上就是完整的实现了。最后附上一张展示效果图：

爱神2017
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap Table 搜索框和查询功能
08-28
主要介绍了Bootstrap Table 搜索框和查询功能，非常不错，具有参考借鉴价值,需要的朋友可以参考下
Bootstrap-Table实现自定义条件查询
HerryDong的博客
03-23 6896
鉴于最近有人询问Bootstrap-Table的自定义条件查询如何实现，今天特在此说明。首先展示一下效果： 默认查询 条件查询 测试数据 前端代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <...
bootstraptable表头添加自定义搜索框（带文本,下拉,弹窗多选搜索）
最新发布
2401_84094908的博客
04-03 650
shadeClose: true, //开启遮罩关闭。btn: [‘确认’, ‘取消’], //按钮。title: ‘前处理工序进度’,title: ‘色号/色名’,title: ‘开卡日期’,title: ‘订单类型’,title: ‘经营方式’,title: ‘品种信息’,title: ‘配方组合’,title: ‘计划米数’title: ‘卡号’,title: ‘批号’,title: ‘客户’,title: ‘颜色’,title: ‘工序’,//初始化过滤下拉内容。
bootstrap table搜索及重置
sinat_38818576的博客
03-27 2481
$('.search').click(function() { var county = $('.sel-county option:selected').val(); var time = $('#time').val(); var bsid = $('#stationId').val(); $.get(tableUrl, { regionId: county, powerMax...
Bootstrap-table中toolbar中新增条件查询及refresh参数使用
OceanSky的专栏
05-17 8738
我们想要在bootstrap-table中自定义查询条件如何实现呢？这些自定义的按钮、输入框是定义在哪个位置呢？还记得上一节中我们在配置中有这样一个属性： //工具按钮用哪个容器 toolbar: '#toolbar', &amp;lt;div id=&quot;toolbar&quot;&amp;gt;&amp;lt;/div&amp;gt; 我们定义的查询条件就是放入到这个div中的，先看一下我们...
bootstraptable 分页查询 及 条件查询
sinat_33852001的博客
11-30 2170
script/admin/jquery-2.1.0.min.js"> css/bootstrap.min.css" /> css/fonts/css/font-awesome.min.css" rel="stylesheet"> script/bootstrap.min.js"> script/admin/layer/layer.js"> script/admin/bootstrap-tab
基于bootstrap-table 实现 右侧列固定
08-14
基于bootstrap-table 实现 右侧列固定，也可以针对左侧列固定，针对操作列使用起来非常方便，引用jquery、bootstrap-table-fixed 样式和js文件后，可以随意设置，灵活。 fixedColumns: true,//fixedtNumber:2, //...
bootstrap-table-editable.js
11-30
开发过程中使用bootstrap，需要行内编辑，现在需要引入bootstrap-table-editable.js 这个js其实是对x-editable做了一个简单的封装，增加了列的editable属性以及编辑保存后的一些事件。
bootstrap-table.min.js
09-13
columns的formatter方法中可使用this.options获取全局配置信息，主要用户分页序号的设置功能。
bootstrap-table后端分页功能完整实例
10-15
主要介绍了bootstrap-table后端分页功能,结合完整实例形式分析了bootstrap-table后端请求、数据分页功能具体步骤与实现技巧,需要的朋友可以参考下
bootstrap-table-fixed-columns.zip
01-14
fastadmin 表格添加固定表头 bootstrap-table-fixed-columns所需插件
jQuery bootstrap带分页表格数据搜索筛选代码
11-11
jQuery bootstrap带分页表格数据搜索筛选代码
bootstraptable查看详情_bootstrap-table前端实现多条件时间段查询数据
weixin_39526415的博客
12-29 472
实现思路：通过正则匹配到字段是否符合条件，时间段转换为时间戳比对。这是大体的效果图：页面的html代码采购部门：{foreach name="ware_list" item="vo" }{$vo.warehouse_name}{/foreach}单据日期：--查 询下面为请求数据：var productList=[];　　//订单数据//生成订单数据$.ajax({url:dataUrl,type...
html 分页表格插件带查询,boostrap 分页表格插件带搜索
weixin_28797889的博客
07-04 223
1：引入相应的css和js文件css:js:2：html代码请选择活动状态${activityStatus.value}搜索data-id-field="id"data-show-refresh="false">活动主题责任人活动时间(起)活动时间(止)活动状态操作3：js代码调用$(function(){activityListTable.bootstrapTable({url:s...
bootstrap-table的使用（3）--自定义搜索功能，数据库查询一个时间段内的内容并显示为例
baidu_31788709的博客
10-22 9149
自定义搜索功能 bootstrap-table是自带搜索功能的，但是搜索功能比较单一，如果我们有特殊的要求，那么需要自己写一个搜索功能，主要是应用于进行数据库查询，并将结果展示。 大致流程为： 1、利用bootstrap-table自带的url传值，传递参数到servlet。 2、在servlet中进行数据库查询，然后将数据库内容进行整理，整理成JSONArray和JSONObject的数据格式。......
利用JQuery+bootstrap进行多条件搜索展开收起查询条件
qq_37263478的博客
12-10 1531
擅用toggle，无需过多操作
BootStrap table插件 自带默认搜索与自定义筛选整合
热门推荐
csdn_hyp的博客
05-24 2万+
遇到问题：自定义搜索  大量字段筛选传值 （多个字段传值没问题，放入到form表单 进行序列化提交数值无法传入后台）如下图多字段传值代码不够简洁问题解决：定义筛选字段VO优化table自带分页查询方法---将分页查询字段放入VO对象中  在js中将字段form序列化后在 进行分页参数字段拼接  即可结果自定义查询...
bootstrap-table-zh-cn.js下载
10-27
9. 保存您的HTML文件并重新加载您的网页即可开始使用bootstrap-table的中文本地化功能。 以上就是下载bootstrap-table-zh-cn.js的过程。请注意，确保从官方网站下载文件以获取最新版本并避免安全问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值