使用js读取后端数据

1.表格代码， 

overflow:auto，代表滚动条自动显示与隐藏，数据超过设定长度时，就会出现滚动条，否则就会隐藏

                        <div style="height: 260px; overflow:auto;">
                            <table>
                                <thead>
                                <tr>
                                    <th width="50px">序号</th>
                                    <th>待办事项</th>
                                    <th>环节名称</th>
                                    <th>受理人</th>
                                    <th width="80px">业务操作</th>
                                </tr>
                                </thead>
                                <tbody id="tydb_box">

                                </tbody>
                            </table>
                        </div>
      

2.<tbody>表格体部分通过js接收后端数据进行生成，不使用function方法，直接在<tbody>中通过<td>标签定义静态表格也可以，读取后端数据的js代码如下：

function queryCenter() {
    var paramMap = {};

    $.ajax({
        url: G3.cmdPath + "/rz/unite/list",
        type: 'post',
        dataType : 'json',
        contentType:'application/json',
        data : JSON.stringify(paramMap),
        success: function(data) {
            //显示市场活动的列表
            var htmlStr;
            for (var i=0; i < 10 ;i++) { //第一层循环取到各个list
                var j=i+1;
                if (data.total-j>=0){
                    htmlStr += "<tr>" +"<td>"+j+"</td>"+
                        "<td>"+data.data[data.total-j].ENT_NAME+"("+data.data[data.total-j].INFOFLOW_NAME+")"+"</td>"+
                        "<td>"+data.data[data.total-j].CUR_ACT_NAME+"</td>"+
                        "<td>"+data.data[data.total-j].CUR_ACT_USER_NAME+"</td>"+
                        "<td>"+"<a href='"+data.data[data.total-j].EDIT_URL+"' target='_blank' >办理</a>"+"</td>" +
                        "</tr>";
                    $("#tydb_box").html(htmlStr);
                }else {
                    break;
                }
            }
        },
        error: function(error) {
            G3.alert("提示", '请求失败' + error);
        }
    })
}

其中htmlStr参数用于存储html语句，语句中的<td>标签内的data值，需要根据个人需求及数据库字段自行修改  

3. controller层

/**
     * 全部查询
     * @param map
     * @return
     */
    @RequestMapping({"/list"})
    @ResponseBody
    public Map<String, Object> selectUniteTaskList( @RequestBody Map<String, Object> map) {
        return uniteTaskService.queryUniteInfo(map);
    }

4.service层

 Map<String, Object> queryUniteInfo(Map<String, Object> map);

 5.serviceImpl

@Autowired
    private UniteTaskMapper uniteTaskMapper;
    @Override
    public  Map<String, Object> queryUniteInfo(Map<String, Object> map){
        Map<String, Object> resultMap = new HashMap<>();
        List<Map<String, String>> list = uniteTaskMapper.queryUniteInfo(map);
        resultMap.put("data", list);
        int total = PageUtil.getTotalCount();
        resultMap.put("total", total != - 1 ? total : list.size());
        return resultMap;
    }

 6.mapper

/**
     * 查询统一待办信息
     * @param map
     * @return
     */
    List<Map<String,String>> queryUniteInfo(Map<String,Object> map);

7.mapper.xml

<select id="queryUniteInfo" parameterType="map" resultType="map">
        SELECT *
        FROM portal_task
        <where>
            <if test="entName != null and entName != ''">
                <bind name="entName" value="'%' + entName + '%'"/>
                AND ENT_NAME LIKE #{entName}
            </if>
            <if test="infoFlowName != null and infoFlowName != ''">
                AND `INFOFLOW_NAME` = #{infoFlowName}
            </if>
            <if test="curActName != null and curActName != ''">
                <bind name="curActName" value="'%' + curActName + '%'"/>
                AND CUR_ACT_NAME LIKE #{curActName}
            </if>
        </where>
    </select>