使用layUI+bootstrap+java写个简单分页查询

最新推荐文章于 2022-10-28 00:01:11 发布

梵墨白

最新推荐文章于 2022-10-28 00:01:11 发布

阅读量234

点赞数

分类专栏：前端 java layUI

本文链接：https://blog.csdn.net/weixin_45501398/article/details/103924120

版权

java 同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

layUI

3 篇文章 0 订阅

订阅专栏

HTML代码部分

<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">

<head th:include="include :: header"></head>

<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-11">
            <div class="ibox">
                <div class="ibox-body">
                    <div class="fixed-table-toolbar">
                        <div class="columns pull-left">

                        </div>
                        <div class="columns pull-right">
                            <button class="btn btn-success" οnclick="reLoad()">查询</button>
                        </div>

                        <div class="columns pull-right col-md-2 nopadding">
                            <input id="searchName" type="text" class="form-control" placeholder="模型名称">
                        </div>
                    </div>
                    <table id="exampleTable" data-mobile-responsive="true">
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!--shiro控制bootstraptable行内按钮看见性 来自bootdo的创新方案 -->
    <div>
        <script type="text/javascript">
            var s_edit_h = 'hidden';
            var s_remove_h = 'hidden';
            var s_resetPwd_h = 'hidden';
        </script>
    </div>
    <div shiro:hasPermission="act:process:edit">
        <script type="text/javascript">
            var s_edit_h = '';
        </script>
    </div>
    <div shiro:hasPermission="act:process:remove">
        <script type="text/javascript">
            var s_remove_h = '';
        </script>
    </div>
    <div shiro:hasPermission="act:process:resetPwd">
        <script type="text/javascript">
            var s_resetPwd_h = '';
        </script>
    </div>
</div>
<div th:include="include :: footer"></div>
<script type="text/javascript" src="/js/appjs/workbench/dmp/modelquery.js"></script>
</body>

</html>

js代码部分

var prefix = "/workbench/model";
$(function () {
    load();
});

function load() {
    $('#exampleTable')
        .bootstrapTable({
            method: 'get',
            url: prefix + "/list",
            iconSize: 'outline',
            toolbar: '#exampleToolbar',
            striped: true,
            dataType: "json",
            pagination: true,
            singleSelect: false,
            pageSize: 10,
            pageNumber: 1,
            showColumns: false,
            sidePagination: "server",
            queryParams: function (params) {
                return {
                    limit: params.limit,
                    offset: params.offset,
                    name: $('#searchName').val(),
                };
            },
            columns: [{
                field: 'MOULD_NAME',
                title: '模型名称'
            }, {
                field: 'SCENEID',
                title: '类型',
                formatter: function (item, index) {
                    //1影视、2游戏、3教育、4音乐、5电竞、6生活
                    if (item === 1) {
                        return '影视';
                    }
                    if (item === 2) {
                        return '游戏';
                    }
                    if (item === 3) {
                        return '教育';
                    }
                    if (item === 4) {
                        return '音乐';
                    }
                    if (item === 5) {
                        return '电竞';
                    }
                    if (item === 6) {
                        return '生活';
                    }
                }
            }, {
                field: 'USER_LEVEL',
                title: '目标用户',
                formatter: function (item, index) {
                    //1.精准 2优先 3标准
                    if (item === 1) {
                        return '精准';
                    }
                    if (item === 2) {
                        return '优先';
                    }
                    if (item === 3) {
                        return '标准';
                    }
                }
            }, {
                field: 'is_finish',
                title: '是否完成取数',
                align: 'center',
                formatter: function (item, index) {
                    // 模型执行状态：1未执行（待执行） 2正在执行 3执行失败 4执行成功 5取消
                    //0:未完成,1:已完成,-1正在进行)
                    if (item === 0) {
                        var u = '<a class="btn btn-primary btn-sm " href="#" >未完成</a>';
                        return u;
                    }
                    if (item === 1) {
                        var u = '<a class="btn btn-default btn-sm " href="#" >已完成</a>';
                        return u;
                        return '';
                    }
                    if (item === -1) {
                        var u = '<a class="btn btn-danger btn-sm " href="#" >正在进行</a>';
                        return u;
                    }
                }
            }, {
                field: 'private',
                title: '等级',
                align: 'center',
                formatter: function (item, index) {
                    //0:公开,1:私有
                    if (item === 0) {
                        var u = '<a class="btn btn-primary btn-sm " href="#" >公开</a>';
                        return u;
                    }
                    if (item === 1) {
                        var u = '<a class="btn btn-danger btn-sm " href="#" >私有</a>';
                        return u;
                    }
                }
            }
                , {
                    field: 'user_name',
                    title: '创建者用户名'
                }
//            ,{
//                title: '操作',
//                field: 'userId',
//                align: 'center',
//                formatter: function(value, row, index) {
//                    var u = '<a class="btn btn-primary btn-sm " href="#" title="修改"  mce_href="#" οnclick="update(\'' + row.userId+"','"+row.shenpiRoleId+ '\')">修改</a>';
//                    return u;
//                }
//            }
            ],
            onLoadSuccess: function (res) {
                console.log('res====', res);
            },
        });
}

function reLoad() {
    $('#exampleTable').bootstrapTable('refresh');
}

java代码部分

package com.bootdo.workbench.controller;

import cn.hutool.core.convert.Convert;
import com.bootdo.common.utils.PageUtils;
import com.bootdo.common.utils.ShiroUtils;
import com.bootdo.common.utils.StringUtils;
import org.apache.shiro.authz.annotation.RequiresPermissions;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @author 
 * @create  2019-12-27 10:47
 **/
@Controller
@RequestMapping("/workbench/model")
public class ModeQuerylController {

    private static final Logger log = LoggerFactory.getLogger(ModeQuerylController.class);

    @Autowired
    @Qualifier("DmpJdbcTemplate")
    JdbcTemplate jdbcTemplates;

    @Autowired
    JdbcTemplate jdbcTemplate;

    /**
     * 跳转地址
     *
     * @return
     */
    @GetMapping()
    @RequiresPermissions("workbench:model:query")
    String DmpLabel() {
        return "workbench/dmp/modelquery";
    }

    /**
     * 查询出数据并返回
     *
     * @param params
     * @return
     */
    @ResponseBody
    @GetMapping("/list")
    public PageUtils Getlist(@RequestParam Map<String, Object> params) {
        log.info("=====================开始查询模型======================");
        String userid = ShiroUtils.getUserId().toString();
        //查询数据库
        String sql = "SELECT * from  mp_user_mould_sync  where   true ";
        if (StringUtils.isNotBlank(params.get("name").toString())) {
            sql += "  and   MOULD_NAME like  '%" + params.get("name").toString() + "%'";
        }
        List<Map<String, Object>> list = jdbcTemplates.queryForList(sql);
        //数据要有效 并且是公开的或者是自己创建的
        String sql2 = "SELECT *  from  mp_dmp_mould  where  state=0 and  private=0  or  user_id='"+userid+"'";
        List<Map<String, Object>> list1 = jdbcTemplate.queryForList(sql2);
        log.info("执行sql1:[{}],执行sql2:[{}]", sql, sql2);
        //将两个集合遍历比较
        List<Map<String, Object>> list2 = new ArrayList<>();
        for (Map<String, Object> map : list) {
            Object mould_id = map.get("mould_id");
            for (Map<String, Object> map2 : list1) {
                //判断查出来的map是否有相同的id有的话就加到list中
                if (map2.containsValue(mould_id)) {
                    Map<String, Object> map3 = new HashMap<>();
                    map3.putAll(map);
                    map3.putAll(map2);
                    list2.add(map3);
                }
            }
        }
        //分页
        Integer begin = Convert.toInt(params.get("offset"));
        Integer index = Convert.toInt(params.get("limit"));
        List list3 = Pager(begin, index, list2);

        PageUtils pageUtils = new PageUtils(list3, list2.size());

        return pageUtils;
    }


    /**
     * 分页
     *
     * @param begin 开始截取的位数
     * @param index 截取后的数位数
     * @param list
     * @return
     */
    public static List Pager(int begin, int index, List list) {
        if ((begin + index) > list.size()) {
            index = list.size() - begin;
        }
        return list.subList(begin, begin + index);
    }

}