Explication détaillée de l'implémentation par kkpager de la fonction de requête de pagination ajax (avec code)-js tutoriel-php.cn

Explication détaillée de l'implémentation par kkpager de la fonction de requête de pagination ajax (avec code)

php中世界最好的语言

Libérer： 2018-03-31 10:33:16

original

1678 Les gens l'ont consulté

Cette fois, je vous apporte une explication détaillée de l'implémentation par kkpager de la fonction de requête de pagination ajax (avec code). Quelles sont les précautions pour l'explication détaillée de kkpager de l'implémentation de la fonction de requête de pagination ajax. , jetons un coup d'oeil.

Les données de pagination au premier plan conviennent lorsqu'il y a une petite quantité de données, car les données de pagination sont obtenues à partir de l'arrière-plan.

Regardez le front-end. code d'abord :

@{
  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: '/Home/index2',
      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('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>

Copier après la connexion

Code backend :

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

Copier après la connexion

Il n'y a rien à dire

Jetons un œil au style

Je crois que vous avez lu le cas dans cet article. Vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Implémentation asynchrone de fichiers Ajax du téléchargement de formulaire

Méthode de téléchargement de fichiers asynchrones Ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!