Detailed explanation of kkpager's implementation of ajax paging query function (with code)-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Detailed explanation of kkpager's implementation of ajax paging query function (with code)

Mar 31, 2018 am 10:33 AM

ajax Query function

This time I will bring you a detailed explanation of kkpager's implementation of ajax paging query function (with code). What are the precautions for kkpager's detailed explanation of implementation of ajax paging query function. The following is a practical case, let's take a look.

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.

First look at the front-end code:

@{
  Layout = null;
}
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot; /&gt;
  &lt;script src=&quot;~/kkpager/lib/jquery-1.10.2.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;~/kkpager/src/kkpager.js&quot;&gt;&lt;/script&gt;
  &lt;link href=&quot;~/kkpager/src/kkpager_orange.css&quot; rel=&quot;external nofollow&quot; rel=&quot;stylesheet&quot; /&gt;
  &lt;title&gt;Index&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;p style=&quot;width:800px;margin:0 auto;&quot;&gt;
    &lt;p class=&quot;table-responsive&quot; id=&quot;mainContent&quot;&gt;
    &lt;/p&gt;
    &lt;p id=&quot;kkpager&quot;&gt;
    &lt;/p&gt;
  &lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
  function getParameter(name) {
    var reg = new RegExp("(^|&amp;)" + name + "=([^&amp;]*)(&amp;|$)");
    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("&lt;p style=&#39;text-align:center; color:red&#39;&gt;&lt;h2&gt;暂无数据&lt;/h2&gt;&lt;/p&gt;");
          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);
  }
&lt;/script&gt;

Copy after login

Backend 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&lt;String&gt; list = new List&lt;String&gt;();
      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("&lt;table class=\&quot;table table-striped b-t b-light text-sm\&quot; id=\&quot;comptable\&quot;&gt;");
      builder.Append("&lt;thead&gt;&lt;tr&gt;&lt;th&gt;时间&lt;/th&gt;&lt;th&gt;展示&lt;/th&gt;&lt;th&gt;点击（点击率）&lt;/th&gt;&lt;th&gt;激活（激活率）&lt;/th&gt;&lt;th&gt;平均点击单价&lt;/th&gt;&lt;th&gt;实际激活成本&lt;/th&gt;&lt;th&gt;消耗&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;");
      builder.Append("&lt;tbody&gt;");
      foreach (var item in persons) {
        builder.Append("&lt;tr class=\&quot;trStyle\&quot;&gt;");
        builder.Append("&lt;td&gt;" + item + "&lt;/td&gt;");
        builder.Append("&lt;td&gt;" + item + "&lt;/td&gt;");
        builder.Append("&lt;td&gt;" + item+"&lt;/td&gt;");
        builder.Append("&lt;td&gt;" + item + "&lt;/td&gt;");
        builder.Append("&lt;td&gt;" + item + "&lt;/td&gt;");
        builder.Append("&lt;td&gt;" + item + "&lt;/td&gt;");
        builder.Append("&lt;td&gt;" + item + "&lt;/td&gt;");
        builder.Append("&lt;/tr&gt;");
      }
      builder.Append("&lt;/tbody&gt;&lt;/table&gt;");
      var result = new { status = "1", data = builder.ToString(), pagecount = list.Count().ToString(), pagesize = pageSize.ToString() };
      return Json(result);
    }
  }
}

Copy after login

There is nothing to say

Let’s take a look at the style

I believe you have mastered the method after reading the case in this article , for more exciting content, please pay attention to other related articles on the php Chinese website!