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

现看前台代码：

@{

    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分页查询的更多相关文章

  1. ajax分页查询

    (1)先写个显示数据的页面,分页查询需要那几个部分呢? 1.首先是查询的文本框输入,还有查询按钮,那么就开始写代码吧 1 2 3 4 <div> <input type=" ...

  2. ajax分页查询信息的通用方法

    1.页面准备分页的表格与分页div 同时需要在查询条件表单中准备隐藏当前页与页大小的文本框 <div class="container-fluid"> <div ...

  3. springMVC+ajax分页查询

    项目用到ajax技术的查询,查询结果很多时候要分页展示.这两天摸索了一下,在这里做一总结,方便自己随时查看, 也方便后人参考. 这里的顺序遵从从前台页面到后台控制器,业务层,Dao层,Mapper 下 ...

  4. 使用ajax分页查询

    controller: /** * 查询所有用户/查找指定用户 * 分页+搜索 * */@RequestMapping("/findClientBySize")@ResponseB ...

  5. Ajax写分页查询（实现不刷新页面）

    获取数据库中大量的信息显示在页面上,必然要使用到分页查询: 若不使用Ajax,而是用其他的方法,肯定是要刷新页面的,用户体检很不好, 所以最好使用Ajax的方法写分页查询: 1.先来找一张数据很多的表 ...

  6. ThinkPHP 整合Bootstrap Ajax分页

    ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...

  7. MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)

    该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的Upda ...

  8. yii下多条件多表组合查询以及自写ajax分页

    多条件组合查询主要用到yii的CDbCriteria,这个类很多oem框架都有,非常好用. 前台表单 前台查询表单效果是这样的,多个条件组,每个组里放多个input,name为数组.当任何一个复选框被 ...

  9. ajax的分页查询（不刷新页面）

    既然是分页查询,那么就要有张数据很多的表,可以让它进行分页显示,用普通的方法进行分页查询必然是要刷新页面的,这里要实现不刷新页面进行分页显示数据,就要用到ajax方式.进行编写代码 (1)先写个显示数 ...

随机推荐

  1. Docker介绍及安装（一）

    一.Docker简介 1.1 docker介绍 Docker 使用 Google 公司推出的 Go 语言 进行开发实现,基于 Linux 内核的cgroup,namespace,以及 AUFS 类的 ...

  2. NOIP 2012 Vigenère 密码

    洛谷 P1079 Vigenère 密码 https://www.luogu.org/problemnew/show/P1079 JDOJ 1779: [NOIP2012]Vigenèr密码 D1 T ...

  3. pycharm访问mysql数据库

    不需要像eclipse那样添加驱动包,在pycharm里面下载一个pymysql包即可. 然后链接自己电脑的mysql并进行访问即可. 源码如下(参考博客:https://blog.csdn.net/ ...

  4. 重拾算法之复杂度分析（大O表示法）

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  5. Computer Network Chapter4 solution

    1.以太网使用曼彻斯特编码,效率50% 2.侦听信道时间:来回延时时间(10usec):发送数据(25.6usec): 3.单向时延t=S(距离)/V(电缆传输速率):最小帧长=2*t*C(数据传输速 ...

  6. 编码-转义2-mark

    文本编辑器utf8 "一".encode("gbk") 保存:"一"+utf8     保存为16进制的\xe4\xb8\x80,\x标识了 ...

  7. Web协议详解与抓包实战：HTTP1协议-详解请求行（2）

    一.请求行一 二.请求行二 三.请求行三 四.常见方法(RFC7231) 实际测试截图 五.用于文档管理的 WEBDAV 方法(RFC2518) 六.WEBDAV 验证环境  1.登录  2.Wire ...

  8. idea maven项目打包并部署到tomcat

    打包 打开Maven管理器,邮寄package,执行Run Maven Build,执行成功后将war包生成到target目录下. 部署 1.将war包复制到tomcat安装目录下的webapps目录 ...

  9. [原创]浅谈在创业公司对PMF的理解

    [原创]浅谈在创业公司对PMF的理解 在创业时,大多数人都常谈一个词叫"MVP“,但PMF谈的比较少,PMF在创业公司尤为重要,以下谈谈个人一些看法. 1.什么是PMF? 创业公司:一种是找 ...

  10. Django文件上传【单个/多个图片上传】

    准备工作 python:3.6.8 django:2.2.1 新建django项目 确定项目名称.使用的虚拟环境[当然这个也可以后期修改].app的名称 创建成功,选择在新的窗口中打开 图片上传 修改 ...