springboot + layui 实现前端分页

layui是一款采用自身模块规范编写的前端UI框架
本来想利用该系统自带的分页来实现，但好像其只支持MySQL数据库中查询的数据进行分页，而我的数据是从别的数据库中查询，故上网寻求别的解决方法实现功能。

参考链接: 参考链接.

实现效果

前端代码：

    
    {/layui/css/layui.css}" media="all"/>
    <th:block th:include="include :: bootstrap-select-css" />


"col-sm-12 search-collapse">
    
"time-form">
        
"select-list">
            

                
"select-time">
                    创建时间： 
                    "text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
                    -
                    "text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>
                
                

                    "btn btn-primary btn-rounded btn-sm" οnclick="fenye()">"fa fa-search"> ;搜索
                    "btn btn-warning btn-rounded btn-sm" οnclick="$.form.reset('time-form')">"fa fa-refresh"> ;重置
                
            
        
    


    

    
时间戳
    
id
    
风速
    
雨量
    
温度
    
湿度
    
照度
    
光合
    
风向
    
CO2
    
PH
    
土温1
    
土湿1
    
土温2
    
土湿2
    
土温3
    
土湿3
    
电导
    
    


    

上面引入的css和js包有点多，关于分页的也就一共几个包，剩下包与本文没多大关系是用来实现其他功能。
需要导入的css包：
layui.css
bootstrap-table.min.css
bootstrap.min.css

需要导入的js包：
jquery.min.js
bootstrap.min.js
bootstrap-table.min.js
layui.js

这里需要注意一下，所导入的layui的css与js文件需是一个版本下的，不然可能会导致出现分页失败

后台代码：

/**
 * 历史数据
 * @param curr
 * @param limit
 * @param star
 * @param end
 * @return
 * @throws IOException
 */
@PostMapping("/historyData/list")
@ResponseBody
public Map<String, Object> select(int curr, int limit, String star, String end) throws IOException{
    String pageCount;
    star = star + " 00:00:00";
    end = end + " 23:59:59";
    RestfulTD restfulTD = new RestfulTD();
    curr = (curr - 1) * limit;
    String sql = "select * from iot.t_iot_weather_station where ts >= '"+ star + "' and ts <= '" + end + "'" + " limit " + curr + ", " + limit;
    String countSql = "select count(*) from iot.t_iot_weather_station where ts >= '"+ star + "' and ts <= '" + end + "'";
    String data = restfulTD.getTdData("49.235.215.208","6020","root","taosdata",sql);  //从数据库中获取数据
    String count = restfulTD.getTdData("49.235.215.208","6020","root","taosdata",countSql);  //从数据库中获取该条件的总记录数
    JSONObject jsonCount = JSON.parseObject(count);
    JSONArray countList = jsonCount.getJSONArray("data");
    if (countList.size() == 0){
        pageCount = "0";
    }else {
        pageCount = countList.get(0).toString().substring(1,3);
    }
    JSONObject jsonObject = JSON.parseObject(data);
    JSONArray list = jsonObject.getJSONArray("data");
    List<WeatherStation> weatherStations = new ArrayList<>();
    for (int i=0; i<list.size(); i++){
        String str = list.get(i).toString();
        String[] splits = str.split(",");
        if (splits != null && splits.length != 0){
            WeatherStation weatherStation = new WeatherStation();
            String[] st = splits[0].split("\"");
            String[] st2 = splits[1].split("\"");
            String[] split = splits[17].split("]");
            weatherStation.setTs(st[1]);
            weatherStation.setId(st2[1]);
            weatherStation.setWind_speed(Float.parseFloat(splits[2]));
            weatherStation.setRainfall(Float.parseFloat(splits[3]));
            weatherStation.setTemperature(Float.parseFloat(splits[4]));
            weatherStation.setHumidity(Float.parseFloat(splits[5]));
            weatherStation.setIllumination(Float.parseFloat(splits[6]));
            weatherStation.setPhotosynthesis(Float.parseFloat(splits[7]));
            weatherStation.setWind_direction(Float.parseFloat(splits[8]));
            weatherStation.setCo2(Float.parseFloat(splits[9]));
            weatherStation.setPh(Float.parseFloat(splits[10]));
            weatherStation.setSoil_temperature_1(Float.parseFloat(splits[11]));
            weatherStation.setSoil_moisture_1(Float.parseFloat(splits[12]));
            weatherStation.setSoil_temperature_2(Float.parseFloat(splits[13]));
            weatherStation.setSoil_moisture_2(Float.parseFloat(splits[14]));
            weatherStation.setSoil_temperature_3(Float.parseFloat(splits[15]));
            weatherStation.setSoil_moisture_3(Float.parseFloat(splits[16]));
            weatherStation.setConductance(Float.parseFloat(split[0]));
            weatherStations.add(i,weatherStation);
        }
    }
    List<WeatherStation> historyList = weatherStations;
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("data", historyList);  //将数据记录存入map中
    map.put("ct", pageCount);
    return map;
}

至此分页结束，主要还是layui那边，总的来说，就是controller部分利用ajax将数据和数据条数传到前台，前台利用layui进行分页，具体操作可去layui官网文档查询。

layui分页链接