mvc前端pagination分页的使用！

网上资料一大推，还是搞了好久才实现，还是开森；

话不多说，先来个图，样式可以自己去改。

首先html中引用一下几个文件

<link href="../../Scripts/tt/pagination.css" rel="stylesheet" />

<script src="../../Scripts/jquery-1.7.1.min.js"></script>

<script src="../../Scripts/tt/pagination.js"></script>

文件下载地址：https://github.com/superRaytin/paginationjs

然后js中的代码，根据需求进行更改

$(function () {
    (function (name) {
        var container = $('#pagination-' + name);
        var options = {
            dataSource: function (done) {
                //var result = [];
                $.ajax({
                    async:false,    
                    type: 'GET',
                    url: '/Home/pp', //后台获取的数据地址
                    success: function(response) {
                        done(response);
                    }
                });
                //return result;
            },
            locator: function () {   // 这个参数与 dataSource 相关，一般情况下，dataSource 是一个数组，可以直接传给分页组件处理。但如果返回的是 Object，那么就需要指定那个数组，默认为 data，不可少
                // find data and return
                return 'a.b';
            },
            pageSize: 4,     // 默认显示几个页码，每页的条目数
            pageNumber: 1,  // 默认在第几页，初始化时加载哪一页的数据
            pageRange: 2,  //可见的页码范围，即当前页码两边的页码数量。比如当前是第 6 页，设置 pageRange 为 2，则页码条显示为 '1... 4 5 6 7 8'
            showNavigator: true,  // 显示总页码数和当前第几页
            showGoInput: true,   // 显示跳转到第多少页
            showGoButton: true,  // 显示点击跳转的按钮
            // activeClassName: 'systemPagerActive',
            prevText: ' 上一页 ',
            nextText: ' 下一页 ',
            goButtonText: 'go',
            formatGoInput: '跳转到第 <%= input %> 页',
            className: '"am-pagination am-pagination-default"',样式
            callback: function (response, pagination) {
                window.console && console.log(22, response, pagination);
                var dataHtml = '<table>';//这边是添加表格的然后给样式，就是字符串的拼接

                $.each(response, function (index, item) {

                        var pa = /.*\((.*)\)/;       //这两行是给数据库时间格式化的，可忽略

                        var unixtime = item.pubdate.match(pa)[1].substring(0, 10);                

                    dataHtml += '<tr><td style="width: 10px">' +
                        '<img src="../../Content/img/point.jpg" />' +
                        '</td>' + '<td class="title_td_list">' +
                        '<div class="t_time">' +
                         '<span class="color_gray">' +
                         '[' + getTime(unixtime) + ']'
                        + '</span></div>'+
                        '<a href="/Home/Index3?id='+item.id+'" target="_blank">'+
                         '<span class="over_content">'
                        + item.title + '</span></a>'+
                        ' <div class="read_num">'+
                             '<span class="color_gray">(阅读 <span class="color_red">'+
                             [item.read_count]+'</span> 次)</span>'+
                                           ' </div>'+
                        '</td></tr>';
                });


                dataHtml += '</table>';
                container.prev().html(dataHtml);
            }
        };


        container.pagination(options);


        container.addHook('beforePageOnClick', function () {
            // 点击页码之前调用
            window.console && console.log('beforePageOnClick...');
            //return false
        });
        container.addHook('beforeRender', function () {
            // 每次分页时会重新渲染分页条，渲染之前调用
            console.log("渲染之前触发");
        });
        container.addHook('beforePreviousOnClick', function () {
            console.log('点击上一页之前调用');
        });
        container.addHook('beforeNextOnClick', function () {
            console.log('点击下一页之前调用');
        });
        container.addHook('beforeGoButtonOnClick', function () {
            console.log('分页跳转按钮点击之前调用');
        });


        

    })('demo1');

控制器中就返回json，随便写的测试

        public JsonResult pp()
        {
            var curlist = BT.SqlHelper.ExecQueryList("test", null);
            return Json(curlist, JsonRequestBehavior.AllowGet);

        }

恩，就是这样，比较适合数据量小的，大的可以用存储过程来实现分页。

最后 最后 前台 的调用差点忘了。。。。打上

<div class="data-container"></div>

<div id="pagination-demo1"></div>

小白一个 ，大家可以去官方文档了解更多的。。