• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    kkpager 实现ajax分页查询功能

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

    先看下前台代码:

    @{
      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 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) {
          ListString> list = new ListString>();
          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分页查询功能实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    您可能感兴趣的文章:
    • ajax分页查询详解
    • Ajax写分页查询(实现不刷新页面)
    • ajax实现数据分页查询
    • ajax的分页查询示例(不刷新页面)
    • Ajax案例集下载:新增分页查询案例(包括《Ajax开发精要》中的两个综合案例) 下载
    • Spring Data JPA+kkpager实现分页功能实例
    上一篇:基于CORS实现WebApi Ajax 跨域请求解决方法
    下一篇:基于Ajaxupload的多文件上传操作
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    kkpager 实现ajax分页查询功能 kkpager,实现,ajax,分页,查询功能,