kkpager 实现ajax分页查询

前台分页数据，适合数据少量的时候，因为分页的数据是从后台获取的，大数据的话不建议使用

现看前台代码：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/kkpager/lib/jquery-1.10.2.min.js"></script>
    <script src="~/kkpager/src/kkpager.js"></script>
    <link href="~/kkpager/src/kkpager_orange.css" rel="stylesheet" />
    <title>Index</title>
</head>
<body>
    <div style="800px;margin:0 auto;">
        <div class="table-responsive" id="mainContent">
        </div>
        <div id="kkpager">

        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    function getParameter(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }
    function GetExcelTable(pageindex) {
        $.ajax({
            url: '/Home/index2',
            dataType: "json",
            type: "POST",
            data: { "pageIndex": pageindex },
            success: function (data) {
                if (data.status == "0") {
                    $("#mainContent").empty();
                    $("#mainContent").html("<div style='text-align:center; color:red'><h2>暂无数据</h2></div>");
                    return;
                }
                $("#mainContent").html(data.data);
                //定义分页样式
                var totalCount = parseInt(data.pagecount);
                var pageSize = parseInt(data.pagesize);

                var pageNo = getParameter('pageIndex');//该参数为插件自带，不设置好，调用数据的时候当前页码会一直显示在第一页

                if (!pageNo) {
                    pageNo = pageindex;
                }
                var totalPages = totalCount % pageSize == 0 ? totalCount / pageSize : (parseInt(totalCount / pageSize) + 1);
                kkpager.generPageHtml({
                    pno: pageNo,
                    total: totalPages,
                    totalRecords: totalCount,
                    mode: 'click',
                    click: function (n) {
                        this.selectPage(pageNo);
                        searchPage(n);
                        return false;
                    }
                }, true);
            }, error: function (jqXHR, textStatus, errorThrown) {

            }
        });
    }
    //init
    $(function () {
        GetExcelTable(1)
    });
    //ajax翻页
    function searchPage(n) {
        GetExcelTable(n);
    }
</script>

后台代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Mvc;

namespace MvcKKpager.Controllers
{
    public class HomeController : Controller
    {
        private readonly int pageSize = 2;
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }
        public ActionResult Index2(string pageIndex) {

            List<String> list = new List<String>();
            list.Add("保护环境");
            list.Add("保护环境");
            list.Add("保护环境");
            list.Add("保护环境");  
            list.Add("保护环境");  
         
            var persons = (from p in list select p).Skip((int.Parse(pageIndex) - 1) * pageSize).Take(pageSize);

            StringBuilder builder = new StringBuilder();
            builder.Append("<table class="table table-striped b-t b-light text-sm" id="comptable">");
            builder.Append("<thead><tr><th>时间</th><th>展示</th><th>点击（点击率）</th><th>激活（激活率）</th><th>平均点击单价</th><th>实际激活成本</th><th>消耗</th></tr></thead>");
            builder.Append("<tbody>");
            foreach (var item in persons) {
                builder.Append("<tr class="trStyle">");
                builder.Append("<td>" + item + "</td>");
                builder.Append("<td>" + item + "</td>");
                builder.Append("<td>" + item+"</td>");
                builder.Append("<td>" + item + "</td>");
                builder.Append("<td>" + item + "</td>");
                builder.Append("<td>" + item + "</td>");
                builder.Append("<td>" + item + "</td>");
                builder.Append("</tr>");
            }
            builder.Append("</tbody></table>");
            var result = new { status = "1", data = builder.ToString(), pagecount = list.Count().ToString(), pagesize = pageSize.ToString() };
            return Json(result);
        }
    }
}

也没什么好说的

看下样式吧

下载链接：http://pan.baidu.com/s/1dEJqXzF