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分页查询的更多相关文章
- ajax分页查询
(1)先写个显示数据的页面,分页查询需要那几个部分呢? 1.首先是查询的文本框输入,还有查询按钮,那么就开始写代码吧 1 2 3 4 <div> <input type=" ...
- ajax分页查询信息的通用方法
1.页面准备分页的表格与分页div 同时需要在查询条件表单中准备隐藏当前页与页大小的文本框 <div class="container-fluid"> <div ...
- springMVC+ajax分页查询
项目用到ajax技术的查询,查询结果很多时候要分页展示.这两天摸索了一下,在这里做一总结,方便自己随时查看, 也方便后人参考. 这里的顺序遵从从前台页面到后台控制器,业务层,Dao层,Mapper 下 ...
- 使用ajax分页查询
controller: /** * 查询所有用户/查找指定用户 * 分页+搜索 * */@RequestMapping("/findClientBySize")@ResponseB ...
- Ajax写分页查询（实现不刷新页面）
获取数据库中大量的信息显示在页面上,必然要使用到分页查询: 若不使用Ajax,而是用其他的方法,肯定是要刷新页面的,用户体检很不好, 所以最好使用Ajax的方法写分页查询: 1.先来找一张数据很多的表 ...
- ThinkPHP 整合Bootstrap Ajax分页
ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...
- MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)
该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的Upda ...
- yii下多条件多表组合查询以及自写ajax分页
多条件组合查询主要用到yii的CDbCriteria,这个类很多oem框架都有,非常好用. 前台表单 前台查询表单效果是这样的,多个条件组,每个组里放多个input,name为数组.当任何一个复选框被 ...
- ajax的分页查询（不刷新页面）
既然是分页查询,那么就要有张数据很多的表,可以让它进行分页显示,用普通的方法进行分页查询必然是要刷新页面的,这里要实现不刷新页面进行分页显示数据,就要用到ajax方式.进行编写代码 (1)先写个显示数 ...
随机推荐
- 5.4 RDD编程---综合案例
一.求top值 任务描述:求出多个文件中数值的最大.最小值 二.求最大最小值 任务描述:求出多个文件中数值的最大.最小值 解题思路:通过一个人造的key,让所有的值都成为“key”的value-lis ...
- flask flask_session,WTForms
一.Flask_session 本质上,就是是cookie 下的session存储在redis中,方便快速取得session from flask import Flask,session from ...
- 深入理解defer（上）defer基础
深入理解 defer 分上下两篇文章,本文为上篇,主要介绍如下内容: 为什么需要 defer: defer 语法及语义: defer 使用要点: defer 语句中的函数到底是在 return 语句之 ...
- 201871010136-赵艳强《面向对象程序设计（Java）》第八周学习总结
201871010136-赵艳强<面向对象程序设计(Java)>第八周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这 ...
- zz图像、神经网络优化利器:了解Halide
动图示例实在太好 图像.神经网络优化利器:了解Halide Oldpan 2019年4月17日 0条评论 1,327次阅读 3人点赞 前言 Halide是用C++作为宿主语言的一个图像处理相 ...
- 每天一道Rust-LeetCode(2019-06-05)
每天一道Rust-LeetCode(2019-06-05) 最长回文子串 坚持每天一道题,刷题学习Rust. 接续昨天,最长会问字符串的另一种解法 题目描述 解题过程 //leetcode最快解法 / ...
- 实现一个new操作符
new 操作符做了这些事: 1.它创建了一个全新的对象: 2.它会被执行[[Prototype]](也就是__proto__)链接: 3.它使this指向新创建的对象: 4.通过new创建的每个对象最 ...
- ESA2GJK1DH1K升级篇: 快速的移植升级程序到自己的项目(BootLoader程序制作)
前言 此代码兼容STM32F103全系列 为避免添加上升级程序造成内存不足,请使用128KB Flash及其以上的型号 这篇文章是为了能够让大家快速移植我的升级模板程序到自己的项目 BootLoade ...
- 数据结构——顺序队列（sequence queue）
/* sequenceQueue.c */ /* 顺序队列 */ #include <stdio.h> #include <stdlib.h> #include <std ...
- Linux性能优化实战学习笔记：第四十七讲
一.上节回顾 上一节,我们梳理了,应用程序容器化后性能下降的分析方法.一起先简单回顾下.容器利用 Linux 内核提供的命名空间技术,将不同应用程序的运行隔离起来,并用统一的镜像,来管理应用程序的依赖 ...