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

现看前台代码：

@{

    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. 其他综合-CentOS 7 使用二进制包搭建lnmp平台

    CentOS 7 使用二进制包搭建lnmp平台 1.实验描述 通过二进制搭建 lnmp 平台,实现 web 环境基本部署 2.实验环境 虚拟机: 系统:CenOS 7.6 内存:2 G+ 数量:1台 ...

  2. kerberos&LDAP实现免密码登录搭建

    kerberos && openldap 1.install openldap & kerberos server: yum install db4 db4-utils db4 ...

  3. google v8

    https://github.com/tongbai168/v8 https://iwebing.lofter.com/tag/chromium  编译动态库 gyp mylib.gyp --dept ...

  4. EditPlus常用正则表达式

    正则表达式(Regular Expression,在代码中常简写为regex.regexp或RE)是计算机科学的一个概念.正则表达式使用单个字符串来描述.匹配一系列符合某个句法规则的字符串.在很多文本 ...

  5. Git安装（一）

    1. 下载Git 官网地址:https://git-scm.com/downloads 这里选择下载Git-2.23.0-64-bit.exe 2. 安装 安装完成

  6. opera11以下添加搜索引擎的办法

    opera11以下:首选项,搜索引擎设置添加搜索引擎,地址是https://www.baidu.com/s?wd=%s 这是从其他浏览器里面得到的. opera11以上: http://www.bai ...

  7. 热情组——项目冲刺 Day5

    项目相关 作业相关 具体描述 班级 班级链接 作业要求 链接地址 团队名称 热情组 作业目标 实现软件制作,以及在福大的传播 Github链接 链接地址 SCRUM部分: 成员昵称 昨日目标 开始时间 ...

  8. CISCO 3750交换机堆叠

    双交换机堆叠操作 一.基本要求: ios版本要一致.专用的堆叠模块和堆叠线缆.最大堆叠个数9 二.堆叠的好处: 高密度端口.便于管理.堆叠的交换机可以看作一台交换机统一配置 三.堆叠实例: 1:分别清 ...

  9. 强烈推荐一个和朋友远程桌面的软件teamviewer

    强烈推荐一个和朋友远程桌面的软件teamviewer个人认为:贼溜

  10. Visual Studio 调试系列4 单步后退来检查旧应用状态（使用使用 IntelliTrace 窗口）

    系列目录     [已更新最新开发文章,点击查看详细] IntelliTrace 后退会在每个断点处及调试器步骤事件发生时自动拍摄应用程序的快照. 凭借记录的快照便可以返回到上一个断点或步骤,并查看当 ...