kkpager如何实现ajax分页查询功能-创新互联

这篇文章主要介绍了kkpager如何实现ajax分页查询功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联建站是专业的玉溪网站建设公司，玉溪接单;提供成都网站制作、网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行玉溪网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

先看下前台代码：

@{
  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 >
    <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'><h3>暂无数据</h3></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分页查询功能”这篇文章对大家有帮助，同时也希望大家多多支持创新互联网站建设公司，，关注创新互联行业资讯频道，更多相关知识等着你来学习!

分享标题：kkpager如何实现ajax分页查询功能-创新互联
本文链接：https://www.cdcxhl.com/article28/doojcp.html

成都网站建设公司_创新互联，为您提供商城网站、域名注册、定制网站、标签优化、ChatGPT、网站营销

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容