Home > Article > Backend Development > Detailed example of kkpager implementing ajax paging query function

Detailed example of kkpager implementing ajax paging query function

小云云Original: 2017-12-25 10:33:151769browse

This article mainly introduces kkpager to realize the ajax paging query function and paginate data in the foreground. It is suitable when there is a small amount of data. Because the paging data is obtained from the background, it is not recommended for big data. , please refer to this article for the specific front and backend code, I hope it can help you.

Foreground paging data is suitable when there is a small amount of data, because the paging data is obtained from the background. It is not recommended for large data.

Let’s take a look at the front-end code first:

@{
  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>
  <p style="width:800px;margin:0 auto;">
    <p class="table-responsive" id="mainContent">
    </p>
    <p id="kkpager">
    </p>
  </p>
</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: &#39;/Home/index2&#39;,
      dataType: "json",
      type: "POST",
      data: { "pageIndex": pageindex },
      success: function (data) {
        if (data.status == "0") {
          $("#mainContent").empty();
          $("#mainContent").html("<p style=&#39;text-align:center; color:red&#39;><h2>暂无数据</h2></p>");
          return;
        }
        $("#mainContent").html(data.data);
        //定义分页样式
        var totalCount = parseInt(data.pagecount);
        var pageSize = parseInt(data.pagesize);
        var pageNo = getParameter(&#39;pageIndex&#39;);//该参数为插件自带，不设置好，调用数据的时候当前页码会一直显示在第一页
        if (!pageNo) {
          pageNo = pageindex;
        }
        var totalPages = totalCount % pageSize == 0 ? totalCount / pageSize : (parseInt(totalCount / pageSize) + 1);
        kkpager.generPageHtml({
          pno: pageNo,
          total: totalPages,
          totalRecords: totalCount,
          mode: &#39;click&#39;,
          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>

The back-end code:

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);
    }
  }
}

There’s nothing much to say

Look at the style

Related recommendations:

Summary of how PHP implements ajax paging

Detailed explanation of the simple implementation of AJAX paging effect

php Ajax paging simple application example_PHP tutorial

The above is the detailed content of Detailed example of kkpager implementing ajax paging query function. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Sharing examples of opening and usage of PHP WeChat enterprise account callback modeNext article：Sharing examples of opening and usage of PHP WeChat enterprise account callback mode

See more

Detailed example of kkpager implementing ajax paging query function

Related articles