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>nameth>
            <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 += "";
                        content += "    " + (i + 1) + "";
                        content += "    ";
                        content += "    " + n.name + "";
                        content += "    ";
                        content += "        ";
                        content += "            ";
                        content += "        ";
                        content += "        ";
                        content += "            ";
                        content += "        ";
                        content += "        ";
                        content += "            ";
                        content += "        ";
                        content += "    ";
                        content += "";
                        //$("tbody").append(content);
                        $("tbody").html(content);
                    });

                    //拼接导航条
                    var pageContent = "";

                    if (pageObj.pageno != 1) {
                        pageContent += '
' + (pageObj.pageno - 1) + ')">上一页';
                    }

                    for (var i = 1; i <= pageObj.totalno; i++) {
                        if (i == pageObj.pageno) {
                            pageContent += '
' + i + ')">' + i + '';

                        } else {
                            pageContent += '
' + i + ')">' + i + '';

                        }
                    }

                    if (pageObj.pageno != pageObj.totalno) {
                        pageContent += '
' + (pageObj.pageno + 1) + ')">下一页';
                    }

                    $(".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>