kkpager 实现ajax分页查询功能
程序员文章站
2022-06-25 10:46:43
前台分页数据，适合数据少量的时候，因为分页的数据是从后台获取的，大数据的话不建议使用
先看下前台代码：
@{
layout = null;
}
<...
前台分页数据，适合数据少量的时候，因为分页的数据是从后台获取的，大数据的话不建议使用
先看下前台代码：
@{
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="external nofollow" 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(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);
}
}
}
也没什么好说的
看下样式吧
总结
以上所述是小编给大家介绍的kkpager 实现ajax分页查询功能实例代码，希望对大家有所帮助