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="width: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().match(reg);

        if (r != null) return unescape(r[]); return null;

    }

    function GetExcelTable(pageindex) {

        $.ajax({

            url: '/Home/index2',

            dataType: "json",

            type: "POST",

            data: { "pageIndex": pageindex },

            success: function (data) {

                if (data.status == "") {

                    $("#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 ==  ? totalCount / pageSize : (parseInt(totalCount / pageSize) + );

                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()

    });

    //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 = ;

        //

        // 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) - ) * 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 = "", data = builder.ToString(), pagecount = list.Count().ToString(), pagesize = pageSize.ToString() };

            return Json(result);

        }

    }

}

也没什么好说的

看下样式吧

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

巴特西

kkpager 实现ajax分页查询

最新文章

热门文章