欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

kkpager 实现ajax分页查询功能

程序员文章站 2022-03-21 11:05:49
前台分页数据，适合数据少量的时候，因为分页的数据是从后台获取的，大数据的话不建议使用 先看下前台代码： @{ 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分页查询功能

总结

以上所述是小编给大家介绍的kkpager 实现ajax分页查询功能实例代码，希望对大家有所帮助

上一篇： Matplotlib中文字体乱码问题

下一篇： CentOS 6.X 安装中文字体

推荐阅读