<div class="table-responsive">

    <table class="table  table-bordered">

        <thead>

        <tr>

            <th width="30">#</th>

            <th width="30"><input type="checkbox"></th>

            <th>name</th>

            <th width="100">操作</th>

        </tr>

        </thead>

        <tbody>

        </tbody>

        <tfoot>

        <tr>

            <td colspan="6" align="center">

                <ul class="pagination">

                </ul>

            </td>

        </tr>

        </tfoot>

    </table>

</div>

<script type="text/javascript">

    $(function () {

        init();

        showMenu();

    });

    //使用Ajax异步查询数据

    function queryPage(pageno) {

        var dataObj = {

            "pageno": pageno,   //pageno 是属性名称,是否增加双引号无所谓

            "pagesize": 3

        };

        if (condition) {

            dataObj.queryText = $("#queryText").val(); //增加模糊查询条件

        }

        var loadingIndex = -1;

        $.ajax({

            url: "${APP_PATH}/role/pageQuery.do",

            type: "post",

            data: dataObj,

            beforeSend: function () {

                loadingIndex = layer.msg('数据查询中', {icon: 6});

                return true;

            },

            success: function (result) {

                //显示结果

                layer.close(loadingIndex);

                if (result.success) {

                    var pageObj = result.page;

                    var roleList = pageObj.data;

                    var content = "";

                    $.each(roleList, function (i, n) {

                        content += "<tr>";

                        content += "    <td>" + (i + 1) + "</td>";

                        content += "    <td><input type='checkbox' value='" + n.id + "'></td>";

                        content += "    <td>" + n.name + "</td>";

                        content += "    <td>";

                        content += "        <button type='button' onclick='window.location.href=\"${APP_PATH}/role/assign.htm?roleid=" + n.id + "\"' class='btn btn-success btn-xs'>";

                        content += "            <i class=' glyphicon glyphicon-check'></i>";

                        content += "        </button>";

                        content += "        <button type='button' onclick='window.location.href=\"${APP_PATH}/role/edit.htm?pageno=" + pageObj.pageno + "&id=" + n.id + "\"' class='btn btn-primary btn-xs'>";

                        content += "            <i class=' glyphicon glyphicon-pencil'></i>";

                        content += "        </button>";

                        content += "        <button type='button' class='btn btn-danger btn-xs' onclick='deleteRole(" + n.id + ",\"" + n.name + "\")'>";

                        content += "            <i class=' glyphicon glyphicon-remove'></i>";

                        content += "        </button>";

                        content += "    </td>";

                        content += "</tr>";

                        //$("tbody").append(content);

                        $("tbody").html(content);

                    });

                    //拼接导航条

                    var pageContent = "";

                    if (pageObj.pageno != 1) {

                        pageContent += '<li><a href="#" onclick="changePageno(' + (pageObj.pageno - 1) + ')">上一页</a></li>';

                    }

                    for (var i = 1; i <= pageObj.totalno; i++) {

                        if (i == pageObj.pageno) {

                            pageContent += '<li class="active"><a href="#" onclick="changePageno(' + i + ')">' + i + '</a></li>';

                        } else {

                            pageContent += '<li><a href="#" onclick="changePageno(' + i + ')">' + i + '</a></li>';

                        }

                    }

                    if (pageObj.pageno != pageObj.totalno) {

                        pageContent += '<li><a href="#" onclick="changePageno(' + (pageObj.pageno + 1) + ')">下一页</a></li>';

                    }

                    $(".pagination").html(pageContent);

                } else {

                    layer.msg("角色分页查询数据失败", {time: 1000, icon: 5, shift: 6});

                }

            },

            error: function () {

                layer.msg("角色分页查询数据错误", {time: 1000, icon: 5, shift: 6});

            }

        });

    }

    var condition = false;

    //条件查询

    function queryRole() {

        var queryText = $("#queryText");

        if (queryText.val() == "") {

            layer.msg("查询条件不能为空", {time: 1000, icon: 5, shift: 6}, function () {

                queryText.focus();

            });

            return;

        }

        condition = true;

        queryPage(1);

    }

    function changePageno(pageno) {

        //window.location.href = "<%=request.getContextPath() %>/role/index.htm?pageno="+pageno;

        queryPage(pageno);

    }

    function init() {

        $(".list-group-item").click(function () {

            if ($(this).find("ul")) {

                $(this).toggleClass("tree-closed");

                if ($(this).hasClass("tree-closed")) {

                    $("ul", this).hide("fast");

                } else {

                    $("ul", this).show("fast");

                }

            }

        });

        <c:if test="${empty param.pageno}">

        queryPage(1);

        </c:if>

        <c:if test="${not empty param.pageno}">

        queryPage(${param.pageno});

        </c:if>

    }

</script>