jquery 分页 Ajax异步

 //使用Ajax异步查询数据

<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>