脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → AJAX相关 → kkpager 实现ajax分页查询

kkpager 实现ajax分页查询功能

 更新时间：2017年08月10日 14:30:23   作者：今晚再打老虎  
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="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分页查询功能实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • Ajax表单异步上传文件实例代码（包括文件域）

    Ajax表单异步上传文件实例代码（包括文件域）

    这篇文章主要介绍了Ajax表单异步上传文件实例代码（包括文件域）,非常不错，具有参考借鉴价值，感兴趣的朋友一起看下吧
    2016-08-08
  • 零基础学习AJAX之AJAX框架

    零基础学习AJAX之AJAX框架

    本文是零基础学习AJAX系列教程的第二篇，我们介绍点不一样的知识，学习下ajaxLib和ajaxGold两款框架，方便我们更好的理解ajax.
    2015-01-01
  • PPJOKE 0.1 (网页嵌入聊天)提供下载

    PPJOKE 0.1 (网页嵌入聊天)提供下载

    PPJOKE 0.1 (网页嵌入聊天)提供下载...
    2006-10-10
  • Ajax实现动态加载数据

    Ajax实现动态加载数据

    这篇文章主要为大家详细介绍了Ajax动态加载数据的小例子，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • jquery中的ajax同步和异步详解

    jquery中的ajax同步和异步详解

    jquery ajax同步的意思是当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载，页面出现了假死状态，当这个ajax执行完毕后才会继续运行其他的代码假死状态解除。而异步的意思是这个ajax代码运行中的时候其他代码一样可以运行。本文给大家详解，感兴趣的朋友参考下
    2015-09-09
  • Ajax 汇总以及初步评价

    Ajax 汇总以及初步评价

    Ajax 汇总以及初步评价...
    2006-08-08
  • Ajax+Struts2实现验证码验证功能实例代码

    Ajax+Struts2实现验证码验证功能实例代码

    这篇文章主要介绍了Ajax+Struts2实现验证码验证功能实例代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-07-07
  • AJAX 请求区分 $_SERVER[''HTTP_X_REQUESTED_WITH''] 小解

    AJAX 请求区分 $_SERVER[''HTTP_X_REQUESTED_WITH''] 小解

    关于这个内容,很多人都有所了解.但从我搜索的内容来看,他们只是略微看一下,根本不知道里面到底是什么情况.
    2011-06-06
  • 编写轻量ajax组件01-与webform平台上的各种实现方式比较

    编写轻量ajax组件01-与webform平台上的各种实现方式比较

    这篇文章主要介绍了编写轻量ajax组件01-与webform平台上的各种实现方式比较,需要的朋友可以参考下
    2015-11-11
  • 用Ajax读取xml文件的简单例子

    用Ajax读取xml文件的简单例子

    Ajax的原理很简单，就是在客户端创建一个XMLHttpRequest对象（用来与服务器进行异步通信，这就是Ajax的核心，其实我们早就在用异步通信了，只是没把这项技术用在网页设计中而已），为该对象的onreadystatechange 属性添加一个事件，当对象的readyState改变的时候就会引发指定的事件。
    2008-04-04

最新评论