主頁(yè) > 知識(shí)庫(kù) > kkpager 實(shí)現(xiàn)ajax分頁(yè)查詢功能

kkpager 實(shí)現(xiàn)ajax分頁(yè)查詢功能

熱門標(biāo)簽:上海企業(yè)外呼系統(tǒng)價(jià)錢 河間市地圖標(biāo)注app 怎樣在地圖標(biāo)注文字 大眾點(diǎn)評(píng)400電話怎么申請(qǐng) 立陶宛地圖標(biāo)注 中國(guó)地圖標(biāo)注不明確情況介紹表 電銷機(jī)器人 長(zhǎng)春 地圖標(biāo)注推銷坑人 東平縣地圖標(biāo)注app

前臺(tái)分頁(yè)數(shù)據(jù),適合數(shù)據(jù)少量的時(shí)候,因?yàn)榉猪?yè)的數(shù)據(jù)是從后臺(tái)獲取的,大數(shù)據(jù)的話不建議使用

先看下前臺(tái)代碼:

@{
  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>暫無(wú)數(shù)據(jù)/h2>/div>");
          return;
        }
        $("#mainContent").html(data.data);
        //定義分頁(yè)樣式
        var totalCount = parseInt(data.pagecount);
        var pageSize = parseInt(data.pagesize);
        var pageNo = getParameter('pageIndex');//該參數(shù)為插件自帶,不設(shè)置好,調(diào)用數(shù)據(jù)的時(shí)候當(dāng)前頁(yè)碼會(huì)一直顯示在第一頁(yè)
        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翻頁(yè)
  function searchPage(n) {
    GetExcelTable(n);
  }
/script>

 后臺(tái)代碼:

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("保護(hù)環(huán)境");
      list.Add("保護(hù)環(huán)境");
      list.Add("保護(hù)環(huán)境");
      list.Add("保護(hù)環(huán)境"); 
      list.Add("保護(hù)環(huán)境"); 
      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>時(shí)間/th>th>展示/th>th>點(diǎn)擊(點(diǎn)擊率)/th>th>激活(激活率)/th>th>平均點(diǎn)擊單價(jià)/th>th>實(shí)際激活成本/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);
    }
  }
}

也沒(méi)什么好說(shuō)的

看下樣式吧

總結(jié)

以上所述是小編給大家介紹的kkpager 實(shí)現(xiàn)ajax分頁(yè)查詢功能實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

您可能感興趣的文章:
  • ajax分頁(yè)查詢?cè)斀?/li>
  • Ajax寫(xiě)分頁(yè)查詢(實(shí)現(xiàn)不刷新頁(yè)面)
  • ajax實(shí)現(xiàn)數(shù)據(jù)分頁(yè)查詢
  • ajax的分頁(yè)查詢示例(不刷新頁(yè)面)
  • Ajax案例集下載:新增分頁(yè)查詢案例(包括《Ajax開(kāi)發(fā)精要》中的兩個(gè)綜合案例) 下載
  • Spring Data JPA+kkpager實(shí)現(xiàn)分頁(yè)功能實(shí)例

標(biāo)簽:內(nèi)江 遼寧 本溪 四川 益陽(yáng) 銅川 營(yíng)口 玉樹(shù)

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《kkpager 實(shí)現(xiàn)ajax分頁(yè)查詢功能》,本文關(guān)鍵詞  kkpager,實(shí)現(xiàn),ajax,分頁(yè),查詢功能,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《kkpager 實(shí)現(xiàn)ajax分頁(yè)查詢功能》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于kkpager 實(shí)現(xiàn)ajax分頁(yè)查詢功能的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章