kkpager 实现ajax分页查询功能

前端  /  管理员 发布于 4年前   183

前台分页数据，适合数据少量的时候，因为分页的数据是从后台获取的，大数据的话不建议使用

先看下前台代码：

@{  Layout = null;}<!DOCTYPE html><html><head>  <meta name="viewport" content="width=device-width" />  <script src="//article/~/kkpager/lib/jquery-1.10.2.min.js"></script>  <script src="//article/~/kkpager/src/kkpager.js"></script>  <link href="//article/~/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分页查询功能实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！


  • 上一条：
    基于Ajaxupload的多文件上传操作
    下一条：
    JavaScript正则表达式验证身份证号码是否合法(两种方法)

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客