单纯用<th><td>写的表格,分页实现

来源:互联网 发布:手机淘宝怎么改号码 编辑:程序博客网 时间:2024/05/29 18:56

1、html:

<div id="tableList">
    <table class="table table-bordered table-striped table-hover" id="rgtable1" style="color:#444444">
        <thead>
        <tr>
            <th>角色</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <#list urlBeanList as urlBean>
        <tr class="odd">
            <td><#if urlBean.urlType?exists>${urlBean.urlType}<#else>无</#if></td>
            <td>
                <button class="buttonnew button--winona2 button--round-l button--border-thin"
                        onclick="urlLookUp('${urlBean.urlType}')"><span><span>查看</span></span>
                </button>
                <button class="buttonnew button--winona2 button--round-l button--border-thin"
                        onclick="urlUpdate('${urlBean.urlType}')"><span><span>修改</span></span>
                </button>
                <button class="buttonnew button--winona2 button--round-l button--border-thin" onclick="urlDelete('${urlBean.urlType}')">
                    <span><span>删除</span></span></button>
            </td>
        </tr>
        </#list>
        </tbody>
    </table>
    <#if pages??>
      <div class="pageNu" align="right">
      总共 ${pages?c}页|第${currentpage?c}页
           <#if (currentpage>1)>
            <a style='cursor:pointer;' onclick = lastPage('${currentpage?c}')>上一页</a>
           <#else>
           </#if>
           <#if (currentpage<pages)>
            <a style='cursor:pointer;' onclick = nextPage('${currentpage?c}')>下一页</a>
           <#else>
           </#if>
          转至<input type="text" name="pageNum" id="pageNum" value="${currentpage?c}" size="5"/>
            <button class="btn btn-success" id="goPageByNum" onclick="goPageByNum()"><span><span>Go</span></span></button>
       </div>  
     </#if>
    


</div>


2、js:

function lastPage(lastPage) {
    lastPage--;
    var url = "/ps-admin-nimitz/system/urlList.json?page=" + lastPage;


    $.ajax({
        url: url,// 跳转到 action
        success: function (data) {
            appendData(data);
        },
        error: function () {
            alert("异常");
        }
    });
}


function nextPage(nextPage) {
    nextPage++;
    var url = "/ps-admin-nimitz/system/urlList.json?page=" + nextPage;


    $.ajax({
        url: url,// 跳转到 action
        success: function (data) {
            appendData(data);
        },
        error: function () {
            alert("异常");
        }
    });
}


function goPageByNum() {
    var maxPage = $.trim($("#maxPage").val());
    var pageNum = $("#pageNum").val();
    var pattern = /^[\d]*$/;


    if (!pattern.test(pageNum)) {
        alert("请输入有效的页数");
        return;
    }
    pageNum++;
    pageNum--;
    maxPage++;
    maxPage--;
    if (pageNum > maxPage) {
        pageNum = maxPage;
    }


    if (pageNum < 1) {
        pageNum = 1;
    }


    var url = "/ps-admin-nimitz/system/urlList.json?page=" + pageNum;


    $.ajax({
        url: url,// 跳转到 action
        success: function (data) {
            appendData(data);
        },
        error: function () {
            alert("异常");
        }
    });
}

function appendData(jsonData) {
    var table = "<table class=\"table table-bordered table-striped table-hover\" style=\"color:#444444\"><thead><tr>" +
        "<th>角色</th>" +
        "<th>操作</th>" +
        "</tr></thead>";
    table = table + "<tbody align='center'>";




    var list = jsonData.urlBeanList;
    for (var i = 0; i < list.length; i++) {
        var str1 = list[i];
        var urlType = str1.urlType;
        
        table = table + "<td nowrap title=\"" + urlType + "\">";
        if (urlType != null) table = table + urlType + "</td>";
        else table = table + "</td>";
        
        table = table + "<td><button class=\"buttonnew button--winona2 button--round-l button--border-thin\" onclick=\"urlLookUp('" + urlType + "')\">查看</button>" +
            "<button class=\"buttonnew button--winona2 button--round-l button--border-thin\" onclick=\"urlUpdate('" + urlType + "')\">修改</button>"+
            "<button class=\"buttonnew button--winona2 button--round-l button--border-thin\" onclick=\"urlDelete('" + urlType + "')\">删除</button></td>";
        
        table = table + "</tr>";
    }


    table = table + "</tbody></table>";
    table = table + "<div class=\"pageNu\" align=\"right\">";
    table = table + "总共" + jsonData.pages + "页|第" + jsonData.currentpage + "页";


    if (jsonData.currentpage > 1) {
        table = table + "<a style='cursor:pointer;' onclick = lastPage(" + jsonData.currentpage + ")>上一页</a>";
    }
    if (jsonData.currentpage < jsonData.pages) {
        table = table + "<a style='cursor:pointer;' onclick = nextPage(" + jsonData.currentpage + ")>下一页</a>";
    }
    table = table + "转至<input type=\"text\" name=\"pageNum\" id=\"pageNum\" value=" + jsonData.currentpage + " size=\"5\"/>"
        + "<button class=\"btn btn-success\" onclick=\"goPageByNum()\"><span><span>Go</span></span></button>";


    $("#currentpage").val(jsonData.currentpage);
    $("#maxPage").val(jsonData.pages);


    $('#tableList').html(table);
    $('#tableList').show();
}



3、java后台 controller:

/*权限列表*/
@RequestMapping("system/urlList.json")
    public String authList2(ModelMap modelMap, HttpServletRequest request, @RequestParam(required = false) String page) {//查询url列表
int totalpages;
        String page1 = page == null ? "1" : page.trim();
        int pages = Integer.parseInt(page1);
        int maxCount = filterService.getUrlPages()-1;//admin不算,所以减去1
        if (maxCount % seg == 0) {
            totalpages = maxCount / seg;
        } else {
            totalpages = maxCount / seg + 1;
        }
        List<UrlBean> urlBeanList = new ArrayList<UrlBean>();
        if (totalpages == 0) {
            pages = 0;
        } else {
            if (pages > totalpages) {
                pages = totalpages;
            }
            int start = (pages - 1) * seg + 1;
            urlBeanList = filterService.getUrlList(start, -1);
            modelMap.put("urlBeanList", urlBeanList);
        }
modelMap.put("urlBeanList", urlBeanList);
modelMap.put("pages", totalpages);
modelMap.put("currentpage", pages);
        psInfoService.baseInfo(request, modelMap);
        modelMap.put("component", "urlList");
        return "JSON";
    }


4、java后台service:

public List<UrlBean> getUrlList(int page, int segment) {
        return filterSql.getUrlList(page, segment);
    }


5、java后台Dao:

public List<UrlBean> getUrlList(int page, int segment) {//查询url列表
    int seg1 = seg;
        if (segment != -1) {//批量导出专用逻辑,一次导出segment条。
            seg1 = segment;
        }
        List<UrlBean> urlBeanList;


        String sql = " select DISTINCT t1.role_name from ps_role t1 where t1.role_name !='ROLE_ADMIN' LIMIT ?,? ";


        urlBeanList = urlJdbcTemplate.query(sql, new Object[]{(page - 1), seg1}, new RowMapper<UrlBean>() {
            @Override
            public UrlBean mapRow(ResultSet rs, int i) throws SQLException {
                UrlBean urlBean = new UrlBean();
                urlBean.setUrlType(rs.getString("role_name"));
                return urlBean;
            }
        });


        return urlBeanList;
    }

原创粉丝点击