专注于经验分享
   工具共享。

Bootstrap Table分页 单列排序 筛选 java后端全套功能实现

bootstraptable-banner.jpg

在我们使用Bootstrap 做前端框架的时候,很多时候需要用到table分页功能。但是Bootstrap不像Layui那样文档全,而且大部分全部都是英文的,所以做起来难免会踩一些坑,博主本次就详细描述一下,使用Bootstrap Table来实现分页、单列排序以及筛选功能。

效果演示

bootstraptable_FY.png

引入样式和类库

PS:因为Bootstrap Table插件是基于Bootstrap的,所以要事先引用Bootstrap的插件才能用。

    <link th:href="/bootstrap-table.css" rel="stylesheet" type="text/css"/>
    <script th:src="/bootstrap-table.js" />

HTML代码

<!--数据筛选按钮-->
<div class="input-group input-group-sm">
    <label for="jjname">基金名称</label>
    <input id="jjname" type="text">
    <label for="qsname">券商</label>
    <input id="qsname" type="text">
    <label for="jjdm">基金代码</label>
    <input id="jjdm" type="text">
    <label for="shichang">市场</label>
    <select id="shichang" name="proType">
        <option value="">全部</option>
        <option value="0">上海</option>
        <option value="1">深圳</option>
    </select>
    <label for="xwlx">席位类型</label>
    <select id="xwlx" name="proType">
        <option value="">全部</option>
        <option value="0">新租</option>
        <option value="1">共用</option>
    </select>
    <button id="btn_fund_search" onclick="xwscreen();" type="button"
        class="btn btn-primary btn-sm">
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询
    </button>
</div>
<!--分页表单-->
<table id="table_data" class="table table-hover table-bordered" >
</table>

js代码实现

function getpages(jjname,qsname,jjdm,shichang,xwlx) {
    $("#table_data").bootstrapTable({
        url: '/getdata',//请求后台的url
        method: 'get',
        dataType: "json",
        striped: true,//设置为 true 会有隔行变色效果
        undefinedText: "空",//当数据为 undefined 时显示的字符
        pagination: true, //分页
        // paginationLoop:true,//设置为 true 启用分页条无限循环的功能。
        showToggle: "true",//是否显示 切换试图(table/card)按钮
        showColumns: "true",//是否显示 内容列下拉框
        pageNumber: 1,//如果设置了分页,首页页码
        onlyInfoPagination:false,
        // showPaginationSwitch:true,//是否显示 数据条数选择框
        pageSize: 10,//如果设置了分页,页面数据条数
        pageList: [10, 20, 40, 80, 160],    //如果设置了分页,设置可供选择的页面数据条数。设置为All 则显示所有记录。
        paginationPreText: '‹',//指定分页条中上一页按钮的图标或文字,这里是<
        paginationNextText: '›',//指定分页条中下一页按钮的图标或文字,这里是>
        // singleSelect: false,//设置True 将禁止多选
        showRefresh : true,//刷新按钮
        search: false, //显示搜索框
        sidePagination: "server", //服务端处理分页
        queryParams: function (params) {//自定义参数,这里的参数是传给后台的
            return {//这里的params是table提供的
                pageNum: (params.offset / params.limit) + 1,//从数据库第几条记录开始
                pageSize: params.limit,//找多少条
                sortName: params.sort,
                sortOrder: params.order,
                FUND_NAME:jjname,
                SECURITIES_MERCHANT_NAME:qsname,
                FUNDCODE:jjdm,
                MARKET:shichang,
                OPTIONTYPE:xwlx
            };
        },
        columns: [
            {
                field: 'fUND_NAME',
                title: '基金名称',
                align: 'center',
                sortable: true,
                sortOrder: "asc"
            },
            {
                field: 'fUNDCODE',
                title: '基金代码',
                align: 'center',
                sortable: true,
                sortOrder: "asc"
            },
            {
                title: '券商',
                field: 'sECURITIES_MERCHANT_NAME',
                align: 'center',
                sortable: true,
                sortOrder: "asc"
            },{
                title: '市场',
                formatter: function (value, rows, index) {
                    var str = '';
                    if (rows.mARKET == 0) {
                        str = '上海';
                    } else if (rows.mARKET == 1) {
                        str = '深圳';
                    }else{
                        str = '未知';
                    }
                    return str;
                },
                align: 'center',
                sortable: true,
                sortOrder: "asc"
            },{
                title: '席位类型',
                formatter: function (value, rows, index) {
                    var str = '';
                    if (rows.tRADE_TYPE == 0) {
                        str = '主席位';
                    } else if (rows.tRADE_TYPE == 1) {
                        str = '普通席位';
                    }else{
                        str = '未知';
                    }
                    return str;
                },
                align: 'center',
                sortable: true,
                sortOrder: "asc"
            },{
                title: '产品状态',
                field: 'pRODUCT_STATE',
                align: 'center',
                sortable: true,
                sortOrder: "asc"
            },{
                title: '席位使用类型',
                formatter: function (value, rows, index) {
                    var str = '';
                    if (rows.oPTIONTYPE == 0) {
                        str = '新租';
                    } else if (rows.oPTIONTYPE == 1) {
                        str = '共用';
                    }else{
                        str = '未知';
                    }
                    return str;
                },
                align: 'center',
                sortable: true,
                sortOrder: "asc"
            },{
                title: '席位状态',
                //field: 'fUND_SEAT_STATUS',
                formatter: function (value, rows, index) {
                    var typ = '';
                    if (rows.fUND_SEAT_STATUS == 1) {
                        typ = '租用中';
                    } else if (rows.fUND_SEAT_STATUS == 2) {
                        typ = '停用';
                    }else if(rows.fUND_SEAT_STATUS == 3){
                        typ = '退租';
                    }else{
                        typ = '未知';
                    }
                    return typ;
                },
                align: 'center',
                sortable: true,
                sortOrder: "asc"
            }
        ]
    });
}

如上代码,为分页的所有代码,我把大部分常用参数都带上了,大家根据需求使用。先定义一个方法,把分页的实现代码放入该方法中,提供调用。我这里方法接收了5个参数是上方筛选的参数。下面解释一下主要参数的使用:

queryParams:自定义参数,这里的参数是传给后台的如果普通分页一般只需在return{}代码块中添加传参pageNum和pageSize即可。而我这里由于需要同时实现上方的筛选功能,所以传的参数相对来说多了几个。

columns: 这里是配置我们页面上要展示的数据(里边可以填写自己的逻辑代码,根据需求返回值)。

  • title: 是每列的标题名字
  • field: 对应的后台传过来的参数名
  • align: 数据居中显示
  • sortable:开启单列排序(倒序/正序)
  • : sortOrder:配置是倒序还是正序:asc/desc

那么,怎么调用分页呢?

首先,界面加载时我们需要展示所有分页数据:

(不许要筛选的参数,所以把分页方法所需要的参数置为空即可)

$(function () {
    getpages(null,null,null,null,null);
})

当我们点按条件筛选时,通过按钮的点击事件进入指定方法:

function xwscreen() {
    //动态加载表格之前,先销毁表格
    $("#table_material_list").bootstrapTable('destroy');
    //获取筛选的数据
    var jjname = $('#jjname').val();
    var qsname = $('#qsname').val();
    var jjdm = $('#jjdm').val();
    var shichang = $('#shichang').val();
    var xwlx = $('#xwlx').val();
    //然后调用分页把参数传过去
    getpages(jjname,qsname,jjdm,shichang,xwlx);
}

后台实现

这里引用了一个PageHelper依赖,这个依赖让写分页更加简单,我们只要写查询,它会自动帮我们封装limit

Controller处理:

@RequestMapping(value = "/getdata", method = RequestMethod.GET)
@ResponseBody
public JSONObject getRelevSeat(Integer pageNum, Integer pageSize,RelevSeat relevSeat){
    //这里说明一下,除了pageNum和pageSize,剩下的其他参数我都在一个对象里,所以直接接受一个对象就可以
    JSONObject jsonObject = new JSONObject();
    PageHelper.startPage(pageNum, pageSize);
    //查询数据库
    List<RelevSeat> list = relevSeatServiceI.selectRelevSeat(relevSeat);
    //使用pageInfo包装查询
    PageInfo rolePageInfo = new PageInfo(list);
    jsonObject.put("total", rolePageInfo.getTotal());
    jsonObject.put("rows", rolePageInfo.getList());
    return jsonObject;
}

Mybatis的sql语句:(这是个四表联查,大家看看思路就好,用PageHelper后只需写查询语句就行啦。)

    <select id="selectRelevSeat" parameterType="cn.hellohao.common.model.RelevSeat" resultType="cn.hellohao.common.model.RelevSeat">
        select
            t.FUND_NAME,
            v2.FUNDCODE,
            t.SECURITIES_MERCHANT_NAME,
            t.MARKET,
            t.TRADE_TYPE,
            v.PRODUCT_STATE,
            s.OPTIONTYPE,
            t.FUND_SEAT_STATUS,
            w.state
        from t_fund_seats t
                left join view_product_info v on t.fund_code=v.i_product_id
                left join SEATS_ESTABLISH_LOG s on t.fund_code=s.productid
                left join view_innercode_fundcode v2 on t.fund_code=v2.innerCode
                left join workflow_task_product_map w on s.ID=w.process_instance_id
        <where>
            w.state=3
            <if test="FUND_NAME != null">
                and t.FUND_NAME like '%${FUND_NAME}%'
            </if>
            <if test="SECURITIES_MERCHANT_NAME != null">
                and t.SECURITIES_MERCHANT_NAME like '%${SECURITIES_MERCHANT_NAME}%'
            </if>
            <if test="FUNDCODE != null">
                and v2.FUNDCODE  like '%${FUNDCODE}%'
            </if>
            <if test="MARKET != null">
                and t.MARKET =#{MARKET}
            </if>
            <if test="OPTIONTYPE != null">
                and s.OPTIONTYPE =  #{OPTIONTYPE}
            </if>
        </where>
        <if test="sortName != null">
        order by ${sortName}  ${sortOrder}
        </if>
    </select>
赞(2) 打赏
转载请注明文章地址:Hellohao » Bootstrap Table分页 单列排序 筛选 java后端全套功能实现
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏