当前位置: 首页 > 工具软件 > Pagination.js > 使用案例 >

pagination.js快速制作分页

牧飞鹏
2023-12-01

<script type="text/javascript">
    // 请求接口绘制数据
    $(function () {
        getNewsList();
    });

    // 新闻列表接口
    var url = "/news/newsList";

    // 获取新闻列表
    function getNewsList(pageNum, pageSize) {
        $.ajax({
            type: "GET",
            url: url,
            data: {
                pageNum: pageNum,
                pageSize: pageSize
            },
            success: function (data) {
                if (data.code == 0) {
                    // TODO 业务代码,绘制页码数据
                    // 页码
                    $('.js_page').pagination({
                        // TODO 按照自己的需要修改下面的参数,参数可取值及其他参数请参考下面的参数配置
                        pageCount: data.data.pages,//总页数
                        current: data.data.current,//当前第几页
                        prevContent: '上一页',//上一页节点内容
                        nextContent: '下一页',//下一页节点内容
                        mode: 'fixed', //模式,unfixed不固定页码按钮数量,fixed固定数量
                        count: 3, //mode为unfixed时显示当前选中页前后页数,mode为fixed显示页码总数,注意:count+1为显示的数字页码按钮数
                        activeCls: 'selected', //当前页选中状态class名
                        coping: false,//是否开启首页和末页
                        isHide: true, //总页数为0或1时隐藏分页控件
                        keepShowPN: false, //是否一直显示上一页下一页
                        callback: function (api) {// 回调函数
                            var pageNum = api.getCurrent(); //当前页数

                               console.log(pageNum);
                            getData(pageNum, pageNum, 10);
                        }
                    });
                }
            },
            error: function (error) {
                console.log(error);
            }
        });
    }

//获取分页

function getData(page,psize){
        var parms = {
            'page':page,
            'psize': psize,
        }
        http(apiList.adminLog, parms,
            function(data) {
                console.log(data)
                var page_content = $('#vlogdata-tr').html();
                var str = template(page_content, {vlogdata: data.page_content });
                $('#vlogdata').html(str);
            },
            function(error) {
                console.log('error', error)
            }
        )
    }

//关于http方法的封装

function http(url, postData, succCallback, errorCallback, type, dataType, headtype) {
  type = type ? type : 'post'
  dataType = dataType ? dataType : 'json'
  headtype = 'application/x-www-form-urlencoded'
  $.ajax({
    url: url,
    type: type,
    async: true,
    headers: {
      'Content-Type': headtype, //multipart/form-data;boundary=--xxxxxxx   application/json
    },
    data: postData,
    dataType: dataType,
    success: function (data) {
      if (data.code == 200) {
        succCallback(data.datas)
      } else if (data.code == 402) {
        succCallback(data)
      } else if (data.code == 401) {
        layer.msg(data.msg)
        window.location.href = 'index.html'
      } else {
        layer.msg(data.msg)
        succCallback(data.datas)
      }
    },
    error: function (err) {
      layer.msg(err.msg)
      errorCallback(err)
    },
  })
}

</script>

 类似资料: