前端分页插件pagination

ajax请求每页数据,根据返回数据生成页码
<link href="~/Scripts/pagination/pagination.css" rel="stylesheet" />
<script src="~/Scripts/pagination/pagination.min.js"></script>
<div id="dataContainer" style="border:1px solid;border-bottom-color:black;"></div>

<div id="demo"></div>
function load_data(type) {
        $('#demo').pagination({
            dataSource: '/project?type=' + type,//接口 参数
            prevText: '上一页',
            nextText: '下一页',
            className: 'paginationjs-theme-red',
            alias: {
                pageNumber: 'page',
                pageSize: 'size'
            },
            pageSize: 5,
            locator: 'a.data',
            totalNumberLocator: function (response) {//处理页数
                return response.total;
            },
            ajax: {
                type: 'POST',
                beforeSend: function () {//请求前处理
                    $("#dataContainer").html('加载中...');
                }
            },
            callback: function (data, pagination) {//请求后处理
                var html = "";
                for (var i in data) {
                    var item = data[i];
                    html += load_html(item);
                }
                $("#dataContainer").html(html);
            }
        })
    }
    function load_html(item) {
        return "<div><span>" + item.id + "</span>---<span>" + item.title + "</span>---<span>" + item.synopsis + "</span></div>";
    }
    load_data(0);//首次加载

后台代码:

        [HttpPost]
        public ActionResult index(int page, int type)
        {
            var size = 5;
            var list = project_dal.get_list(page, size, type);
            var total = project_dal.get_count(type);
            var model = new result_model()
            {
                data = list.ToArray(),
                total = total,
                page = page
            };
            return Json(model);
        }
        class result_model
        {
            public Array data { get; set; }
            public int page { get; set; }
            public int total { get; set; }
        }

官网地址:http://pagination.js.org/ 

里边有文档有具体的每个参数和方法的使用

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值