Jquery.pagination分页

版权声明:转载原创文章请以超链接形式请注明原文章出处,尊重作者,尊重原创!


恰饭广告




参考资料:

http://www.jq22.com/jquery-info5697

修复:分页出现0的问题,页数取到string类型转为int

注意:必须引入css和js文件

<!DOCTYPE html>
<html lang="cn-ZH">

<head>
    <meta charset="UTF-8">
    <title>pagination.js - 分页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.idaobin.com/css/pagination.css">
</head>
<body>
    <div class="wrapper">
        <div class="container">
            <div class="content">
                <div class="eg">
                    <div class="m-style M-box4"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://www.idaobin.com/js/jquery-3.2.1.js"></script>
    <script src="https://www.idaobin.com/js/jquery.pagination.js"></script>
  <script>
    function tablePagetion(url,page) {
        $.ajax({
            type : 'post',
            url : url, //请求地址
            data : {
                page : page
            },
            dataType : 'json', //返回类型
            success : function(data) { //请求成功
                console.log(data);
            },
            error : function(XMLHttpRequest, textStatus) { //请求失败
                if (textStatus == 'timeout') {
                    var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
                    xmlhttp.abort();
                    alert("请求超时");
                } else if (textStatus == "error") {
                    alert("服务器内部错误");
                } else if (textStatus == "parsererror") {
                    alert("返回类型错误");
                }
            }
        });
    }

    function pagination(pageCount, url) {
        $('.M-box4').pagination({
            mode : 'fixed',
            pageCount : pageCount,
            coping : true,
            homePage : '首页',
            endPage : '末页',
            prevContent : '上页',
            nextContent : '下页',
            jump : true,
            callback : function(api) {
                tablePagetion(url,api.getCurrent());    
            }
        });
    }


    $(document).ready(function() {
        //页面加载设置返回总页数
        $.ajax({
            type : 'post',
            url : 'pagetion', //请求地址
            data : {
                page : 1
            },
            dataType : 'json', //返回类型
            success : function(data) { //请求成功
                console.log(data);
                pagination(data.pageCount, "pagetion");
            },
            error : function(XMLHttpRequest, textStatus) { //请求失败
                if (textStatus == 'timeout') {
                    var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
                    xmlhttp.abort();
                    alert("请求超时");
                } else if (textStatus == "error") {
                    alert("服务器内部错误");
                } else if (textStatus == "parsererror") {
                    alert("返回类型错误");
                }
            }
        });
    });
</script>

</body>

</html>

原文链接:https://www.idaobin.com/archives/1962.html

让我恰个饭吧.ヘ( ̄ω ̄ヘ)

支付宝 ——————- 微信
图片加载中图片加载中



恰饭广告

发表评论

电子邮件地址不会被公开。 必填项已用*标注

+ 49 = 59