當前位置：首頁 » 網頁前端 » 前端分頁插件
擴展閱讀
提分平台的賬號密碼是什麼 2023-08-31 22:07:10
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端分頁插件

發布時間: 2022-01-18 23:38:03

㈠ jQuery分頁插件pagination具體怎麼用求詳細教程

本文實例為大家分享了jQuery Pagination分頁插件的具體代碼，供大家參考，具體內容如下
一、引用CSS和JS：
<link href="/Content/Plugins/jQuery.Pagination_v2.2/pagination.css" rel="external nofollow" rel="stylesheet" type="text/css" /> <script src="/Content/Plugins/jQuery.Pagination_v2.2/jquery.pagination.js" type="text/javascript"></script>
二、HTML：
<div id="Pagination" class="flickr" style="margin-top: 10px; margin-left: 10px;"> </div>
三、JS：
$(function () { var total = parseInt("@(ViewBag.total)"); var page = parseInt("@(ViewBag.page)") - 1; var pageSize = parseInt("@(ViewBag.pageSize)"); $("#Pagination").pagination(total, { callback: function (page_id) { window.location = "BoardList?page=" + page_id + "&pageSize=" + this.items_per_page; }, //PageCallback() 為翻頁調用次函數。 prev_text: " 上一頁", next_text: "下一頁 ", items_per_page: 10, //每頁的數據個數 num_display_entries: 1, //兩側首尾分頁條目數 current_page: page, //當前頁碼 num_edge_entries: 11 //連續分頁主體部分分頁條目數 }); });
四、後台代碼：
public ActionResult BoardList() { PagerModel pager = new PagerModel(); if (Request["page"] == null) { pager.page = 1; pager.rows = 10; pager.sort = "Id"; pager.order = "desc"; } else { pager.page = int.Parse(Request["page"]) + 1; pager.rows = int.Parse(Request["pageSize"]); pager.sort = "Id"; pager.order = "desc"; } boardManageService.GetList(ref pager); List<BoardModel> boardList = pager.result as List<BoardModel>; ViewData["BoardModelList"] = boardList; ViewBag.page = pager.page; ViewBag.total = pager.totalRows; ViewBag.pageSize = pager.rows; return View(); } #endregion
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

㈡ java 前端分頁插件能動態實現分頁嗎 還是要自己寫分頁語句

分頁取數據和顯示層bootstrap有什麼關系？你從後端獲取到數據，然後通過bootstrap的分頁組件顯示就好了吧.後端mvc框架view層一般會提供默認的分頁模板，你可以把bootstrap的分頁樣式加進去，就可以實現動態分頁效果了.

㈢ jquery前端分頁代碼怎麼寫

  1. jPaginate 是一款非常精緻的分頁插件，提供了五種不同風格的分頁效果，支持滑鼠懸停翻頁，快速分頁功能。

  2. 這款插件還提供了豐富的配置選項，你可以根據需要進行設置。

㈣ jquery ajax分頁插件 怎麼寫

包括常用的載入失敗重試，參數可配置是否能手動輸入頁碼，設置按鈕數目，可以調用多個page等等，調用代碼很簡便

<scripttype="text/javascript">
varkpage;

$(function(){
tocount();
});

functiontocount(){
//初始化
$.ajax({url:"/Service/DBCount",type:"post",success:function(e){
kpage=$("#divPage").page({dataCount:e,pageChange:topage});
}
});
}

functiontopage(i,s){
//數據查詢
$("#divInfo").html("載入中...");
$.ajax({url:"/Service/List",type:"post",data:{PageSize:s,PageIndex:i},success:function(r){
$("#tList").html(r);
$("#divInfo").html("");
},error:function(){
$("#divInfo").html("載入失敗...<ahref='javascript:reload();'>重試</href>");
}
});
}

functionreload(){
kpage.reload();
}

</script>

具體jquery.kun_page.js：

/*

---------------------------------
參數config:

dataCount:數據總數

pageSize:頁數據條數

maxButton:頁碼按鈕數目

showCustom:是否能手動輸入頁碼

pageChange:頁變更事件
參數：(i,s,c)
i:pageIndex,當前頁
s:pageSize,頁數據條數
c:pageCount,總頁數

*/

(function($){

$.fn.page=function(config){

if(this.length!=1){
throw"k_page:如有多個page請調用多次!";
}


vardefaults={dataCount:1,pageSize:10,maxButton:6,showCustom:true,pageChange:null}
config=$.extend(defaults,config);

if(config.maxButton<=1)config.maxButton=2;
if(config.pageSize<1)config.pageSize=1;
//按鈕數目需偶數
if(config.maxButton%2!=0)
config.maxButton++;

varpageIndex=1,pageCount,move_kf;

//初始化頁數
functioninitcount(){
pageCount=config.dataCount%config.pageSize==0?config.dataCount/config.pageSize:parseInt(config.dataCount/config.pageSize)+1;
}
initcount();

varprev="<divclass="k_p_prev">上一頁</div>",next="<divclass="k_p_next">下一頁</div>",pbody=$(""),pcustom=$("<spanclass="k_custom">到第頁</span><divclass="k_btn">確定</div>"),cl="<divclass="k_cl"></div>",pipt=$("<inputclass="k_ipt"type="text">");
this.empty().addClass("kun_page").append(prev);
pipt.keypress(function(e){
if(e.which==13){
topage("確定");
returnfalse;
}
}).appendTo(pcustom.children());

if(config.pageChange){
this.unbind("click").bind("click",function(e){
var_t=$(e.target);
if(_t[0].tagName=="DIV"&&_t[0].className!="kun_page"){
topage(_t.text());
}
});
}

//跳轉頁碼
functiontopage(text){

switch(text){
case"上一頁":
if(pageIndex-1<1){
return;
}
pageIndex--;
move_kf="sc_r";
break;
case"下一頁":
if(pageIndex+1>pageCount){
return;
}
pageIndex++;
move_kf="sc_l";
break;
case"確定":

if(!/^d+$/.test(pipt.val())){
pipt.val("");
return;
}
text=parseInt(pipt.val());
if(text<1||text>pageCount){
pipt.val("");
return;
}

default:
var_pindex=parseInt(text);
if(pageIndex==_pindex)
return;
move_kf=pageIndex<_pindex?"sc_l":"sc_r";
pageIndex=_pindex;
break;
}

gopageChange();
}

//頁變更事件
functiongopageChange(){
if(config.pageChange){
if(config.dataCount!=0){
config.pageChange(pageIndex,config.pageSize,pageCount);
endloading();
}
}
}

//非同步載入結束
functionendloading(){
initpage();

}

//添加頁碼
functioninitpage(){
pbody.empty();
var_t_maxb=config.maxButton/2;
//前後頁碼集合
var_t_listp=[],_t_listn=[];
var_min=0,_max=pageCount;

for(vari=1;i<=_t_maxb;i++){
var_t_prev=pageIndex-i,_t_next=pageIndex+i;
//當前頁碼之前的頁
if(_t_prev>0){
_t_listp.push("<divclass="k_p_page">"+_t_prev+"</div>");
if(i==_t_maxb)_min=_t_prev;
}
//當前頁碼之後的頁
if(_t_next<=pageCount){
_t_listn.push("<divclass="k_p_page">"+_t_next+"</div>");
if(i==_t_maxb)_max=_t_next;
}
}
//顯示第一頁
if(_min>1)pbody.append("<divclass="k_p_page">1</div>");
//顯示前……
if(_min-1>1)pbody.append("<em>...</em>");

for(vari=_t_listp.length;i>=0;i--){
pbody.append(_t_listp[i]);
}

pbody.append("<divclass="k_p_pagek_p_current">"+pageIndex+"</div>");

for(vari=0;i<_t_listn.length;i++){
pbody.append(_t_listn[i]);
}

//顯示後……
if(pageCount-_max>1)pbody.append("<em>...</em>");

//顯示最後一頁
if(_max<pageCount)pbody.append("<divclass="k_p_page">"+pageCount+"</div>");

}

initpage();
gopageChange();

this.append(pbody).append(next);
if(config.showCustom)
this.append(pcustom);
this.append(cl);

return{reload:gopageChange,pageCount:pageCount,recount:function(e){
//重新計算頁數
config.dataCount=e;
pageIndex=1;
initcount();
initpage();
gopageChange();
}
};

//console.log(_min+"*"+_max+"*"+pageCount);
}


})(jQuery)

樣式kun_page.css：

.kun_page{font-size:12px;line-height:23px;font-family:"MicrosoftYaHei";}
.kun_page.k_p_page{position:relative;}
.kun_pagediv{float:left;margin:3px;border:solid1px#ccc;cursor:pointer;color:#333;min-width:12px;text-align:center;padding:0px5px;}
.kun_pageem{display:block;float:left;margin:2px;}
.kun_page.k_p_current{background:#ccc;color:#fff;-webkit-animation:scroll_b300ms;animation:scroll_b300ms;}
.kun_page.k_cl{clear:both;float:none;border:none;margin:0px;padding:0px;width:0px;height:0px;}
.kun_page.k_custom{display:block;float:left;margin:3px3px3px20px;}
.kun_page.k_ipt{width:30px;height:21px;border:solid1px#ccc;text-align:center;vertical-align:middle;}
.kun_page.k_m{opacity:0;width:1%;height:1%;top:0px;left:0px;display:block;position:absolute;}
.kun_page.sc_l{background:-webkit-gradient(linear,0100%,100%100%,from(#CCCCCC),to(#645F5F));
-webkit-transform:translate(-50px);-webkit-animation:scroll_k_l300mslinear;
background:-moz-linear-gradient(left,#CCCCCC0%,#645F5F100%);
background:-ms-linear-gradient(left,#CCCCCC0%,#645F5F100%);
transform:translate(-50px);animation:scroll_k_l300mslinear;

}
.kun_page.sc_r{background:-webkit-gradient(linear,0100%,100%100%,from(#645F5F),to(#CCCCCC));
-webkit-transform:translate(50px);-webkit-animation:scroll_k_r300mslinear;
background:-moz-linear-gradient(left,#645F5F0%,#CCCCCC100%);
background:-ms-linear-gradient(left,#CCCCCC0%,#645F5F100%);
transform:translate(50px);animation:scroll_k_r300mslinear;
}

/*
animation
*/

@-webkit-keyframesscroll_k_l{
0%{-webkit-transform:translate(-100px);opacity:0.2;width:200%;height:100%;}
99%{-webkit-transform:translate(-20px);opacity:0;width:200%;height:100%;}
100%{-webkit-transform:translate(-20px);opacity:0;width:1%;height:1%;}
}

@-webkit-keyframesscroll_k_r{
0%{-webkit-transform:translate(100px);opacity:0.2;width:200%;height:100%;}
99%{-webkit-transform:translate(20px);opacity:0;width:200%;height:100%;}
100%{-webkit-transform:translate(20px);opacity:0;width:1%;height:1%;}
}

@keyframesscroll_k_l{
0%{transform:translate(-100px);opacity:0.2;width:200%;height:100%;}
99%{transform:translate(-20px);opacity:0;width:200%;height:100%;}
100%{transform:translate(-20px);opacity:0;width:1%;height:1%;}
}

@keyframesscroll_k_r{
0%{transform:translate(100px);opacity:0.2;width:200%;height:100%;}
99%{transform:translate(20px);opacity:0;width:200%;height:100%;}
100%{transform:translate(20px);opacity:0;width:1%;height:1%;}
}


@-webkit-keyframesscroll_b{
0%,99%{background:#fff;color:#000;}

100%{background:#ccc;color:#fff;}
}
@keyframesscroll_b{
0%,99%{background:#fff;color:#000;}
100%{background:#ccc;color:#fff;}
}

樣式和動畫都可以自己修改(好吧，動畫效果很樸素，鬧哪樣，明明想了很久好嗎)

pageChange事件裡面也沒有過多的其他處理，比如我們公司前後台處理json就有一套方案，ajax提交的參數也有處理

所以若有需求，完全可以在我的代碼上再封裝一層

㈤ 遇到不同的分頁插件 比如bootStrap paganation和jqGrid,但後台代碼該怎麼寫

前端通過介面傳遞頁碼數，後台把相應的數據傳給前台就可以了吧

㈥ 前端頁面的插件有哪些

工具類

方便操作對象，數組等的工具庫

  • underscore.js

  • lo-dash與underscore.js的api基本一致。與underscore比其優勢是，效率高；可自定義構建

  • Sugar在原生對象上增加一些工具方法

  • functional.js提夠了一些Curry的支持

  • Watch.js監視對象或屬性的變化

  • bacon.js函數式編程，cool

  • streamjs用流的方式來對數組，對象進行系列操作

非同步流程式控制制

  • eventproxy朴靈出品

  • Arbiter.js詳細

  • 發布訂閱

  • qPromise風格的

  • Async.js

mock

  • Mock.js生成隨機數據和mock Ajax 請求

  • jquery-mockjaxmockajax請求

時間庫

  • moment

  • datejs

瀏覽器探測

  • Bowser探測具體瀏覽器和版本

  • ua-parser-js探測具體瀏覽器和版本，操作系統，設備類型等

調試

  • console-polyfill能放心的使用 console.log()之類的console方法

  • log讓控制台輸出的log有樣式

  • Konsole.js在頁面的一個元素里輸出log信息詳細

  • uri.jsuri操作

  • cookie增刪改cookie的工具庫

  • director前端路由庫詳細

  • BigDecimal.js提高精度的數字操作

  • JSDoc根據javascript文件中注釋的信息，生成API文檔詳細

  • hotkeys鍵盤事件的封裝

  • MD5用 MD5 的方式加密文件的庫

瀏覽器增強類

讓一些舊瀏覽器變牛逼的庫

  • Selectivizr讓IE 6-8一些的css3選擇器

  • ieBetter讓ie6-8有高級瀏覽器的特性

  • ExplorerCanvas讓IE8-的瀏覽器支持canvas

  • CSS3 Pie讓IE6-9支持border-radious,box-shadow,linear-gradient。 可以使用.htc文件（注意Mine type）或.js文件。在用Pie.js時，box-radious的元素有背景色時，不顯示背景色。。。

  • formFive讓舊的瀏覽器支持HTML5表單的一些特性，如 placeholder,autofocus

  • https://github.com/anselmh/object-fit讓瀏覽器支持object-fit這css規則

  • HTML5 Cross Browser Polyfills一堆Polyfills

  • flexibility讓舊的 IE 也支持 Flexbox

選擇器增強

  • Lining.js讓瀏覽器實現類似::nth-line(), ::nth-last-line()的效果

未歸類

  • prefixfree用了它，寫css時，就不需要加瀏覽器的前綴了

表單類

  • jquery-file-upload上傳文件組件詳細

  • zTree文件樹形視圖控制項

  • Treed樹編輯器。感覺展示的感覺很像思維導圖

  • FileAPI對文件選擇框內的文件的一些處理

表單驗證

  • .Validate詳細

  • jQuery-Validation-Engine

表單元素美化

  • uniform提供對下拉框，單，復選框，按鈕等表單元素的美化

  • select2多選下拉框

  • selectivity和unfirom比較類似

  • DropKick下拉框，單，多選。外觀比uniform好

  • switcheryios7風格的開關組件

  • nouislider用滾動條來設置/控制（音量等）

  • range.css美化input[type=range]元素的外觀

圖片類

  • holderjs生成占點陣圖片

  • lazyload

  • imagesLoaded選取的圖片都載入好後執行調回

  • CSSgram用CSS3的Filter實現Instagram濾鏡的庫

圖標類

  • Icon Font匯總

  • SVG做的圖標

  • svgicons

  • iconic

  • HYBICON帶交互效果。如 hover, click

  • HTML字元實體圖標

  • http://www.amp-what.com/

  • transformicons圖標點擊時，會有一些變換效果。如，加號變成叉號

  • css3patternscss3 做的可平鋪紋理。瀏覽器兼容性不好。

瀏覽圖片

  • fancybox彈出查看圖片，視屏等等demo

  • yoxview彈出查看圖片，圖片尺寸縮放很自然

圖片牆

  • wookmark

UI 框架

  • WeUI由微信官方設計團隊為微信 Web 開發量身設計。

  • Framework7

UI 組件類

拖拽

  • dragula支持Draggable，Dropable和Sortable。感覺比jqueryUI的輕量級，好用的樣子

  • angular-draguladragular 官方的 angular 版本

數據可視化(圖表)

  • Echarts網路出品

  • highcharts功能強大。是收費的。

  • Plottable.JS基於D3的一個圖表庫

  • flot文檔不給力

  • chartJs中文文檔demo很漂亮，很清晰。比較輕量級。

  • ichartJs中國的一個傢伙搞的，感覺還不錯。

時間選取組件

  • foundation-datepicker

  • DatePicker一個簡單的日歷詳細

  • full calendar支持脫放的方式來改變待辦事宜的時間

  • Simple Events Calendar外觀很喜歡。收費 5$

  • jQuery ui datepicker經典，不是很好看

  • pickadate輕量級，手機友好的，漂亮。但貌似只能在彈出層中顯示，而沒有下拉這種方式顯示。

  • zebra-datepicker可配置性很強。但貌似只能在彈出在右上方。。。

  • bootstrap-datepickerbootstrap風格。

  • dateRangePicker選取時間段。bootstrap風格。該組件依賴Twitter Bootstrap, Moment.js和jQuery.

自定義滾動條

  • perfect scrollbar輕量級的滾動條。外觀與mac上chrome的滾動條一樣。

  • iscroll在移動設備上用不錯

載入(Loding)效果

  • CSS SpinnersCSS做的

  • Loaders.cssCSS做的

表格組件

  • jsGridData Grid。詳細

  • backgrid基於Backbone.js的DataGrid

  • excellentexport把表格的內容生成excel。兼容 Firefox, Chrome, IE6+

  • datatables表格可交互（對內容進行排序，刪除等）

  • handsontable生成Excel外觀的數據

  • JSpreadsheets表格數據的組件庫

選取顏色

  • Spectrum

分享到SNS

  • JiaThis生成分享代碼。

編輯器

  • ace代碼編輯器，可以用來做demo演示

  • ckeditor

  • ueditor網路做的

  • tinymce對html內容進行實時的編輯

  • summernote在移動設備上用不錯

通知組件

  • notie.js

HTML5播放器

  • jwplayer被大量網站使用

  • html5media簡單的h5player，輕量級

  • jplayer功能強太，可換膚

展示

  • Impress.js各種旋轉，和奇特的體驗

  • fullPage全屏顯示。用滾輪來翻頁詳細

  • zepto.fullpage專注於移動端的fullPage.js，依賴Zepto

  • pagePiling和fullPage類似

  • turn.js做一本書，帶漂亮的翻頁的效果

幻燈

  • slidesjs挺好用的，只是那幻燈導航的CSS都要自己寫，呵呵詳細

  • iSlider無任何插件依賴的手機平台javascript滑動組件詳細

  • bgstretcher全屏幻燈，會隨著頁面大小的變化而變化。

  • Swiper開源、免費、強大的移動端觸摸滑動插件Swiper中文網

  • coin-slider兼容IE6。蠻好的~。不過其切換方式是一塊塊的。不能配置切換方式。。。

  • wowslider幻燈切換時各種很炫的效果。收費。

  • cycle2普通的幻燈，竟然不支持垂直滾動。。。

  • jcarousel普通的幻燈，不兼容IE6

  • reveal3d滾動。做ppt相當不錯

  • nodePPT國人做的，做ppt也相當不錯。有些方面比 reveal做的還好。但生成導出的html有些問題

  • roundabout3d切換，看的後面圖片的邊

彈出框

  • Magnific-Popup兼容PC，Mobile。還不錯，有5k+的star

  • layer國人開發的，兼容ie6+。不喜歡其調用方式。

動畫效果

  • mixitup用漂亮的動畫效果來完成排序和篩選

  • jQuery.Marquee跑馬燈效果

  • quickflip卡片翻轉效果

  • 卡片翻轉效果2兼容性可以。寫的比較簡單：1，只支持x方向翻轉 2,類名都是規定好的 3，只能被調用一次。 需要改寫一下。我的改進版見這里

  • TheaterJS模擬兩個人在屏幕上對話

  • midnight.js文字顏色隨著背景變，屌炸了

  • color-animationjquery的顏色漸變動畫插件。jquery的動畫不支持顏色值的變化。改庫提供了這個支持。

  • transit對元素進行css的變換

  • tagcanvas3D標簽雲效果詳細

  • iconate圖片切換動畫

  • Snap.js左/右側導航的出現效果

  • CSS shake抖動動畫

  • ClickSpark.js點擊後的一些酷炫的效果

視覺差插件

  • scrollorama比較簡單

  • superscrollorama能做的效果更多，但要用第三方Tween的庫，使用起來比較復雜。

  • scrolldeck

flash

  • swfobj能夠自動檢測PC、Mac機器上各種主流瀏覽器對Flash插件的支持情況。它使得插入Flash媒體資源盡量簡捷、安全。而且它是非常符合搜索引擎優化的原則的。此外，它能夠避免您的HTML、XHTML中出現object、embed等非標准標簽，從而符合更加標准。詳細

抽獎

  • wScratchPad刮刮卡刮獎效果

  • jqueryrotate旋轉插件。可以用來做轉盤抽獎效果

    • 用戶體驗增強類

  • Intro.js用來介紹網站的功能很不錯。也可以做新手引導。

  • blockUILolding組件。

  • simple-hint提示信息。用css做的。兼容性IE 9+。

  • dotdotdot文字溢出時，添加在文字末尾加省略號

  • jQuery-menu-aim二級菜單的切換如Amazon主頁上一樣迅速

  • AnythingZoomer放大鏡功能

  • 美化/高亮語法代碼

  • google-code-prettify

  • DlHighlight僅支持JavaScript、CSS、XML、HTML 這4語法高亮

  • please按要求隨機舒服的顏色

  • Awesomplete輸入的智能提示，自動補全

  • proTip提示。感覺比 Bootstrap 的 tip 好

  • Hammerjs手勢庫。封裝了 Swipe, Tap, Pinch, Pan等手勢

動畫

  • velocity提高Jquery動畫的性能。以及顏色動畫之類的新特性。

    • SVG

  • Snap.svg操作 SVG 的 JS 庫。號稱 SVG 的 jQuery。demo

  • walkway以動畫的方式，漸漸地畫出 SVG 的路徑。

測試

  • Mocha

  • Chai

  • Should

  • Snoion

  • DeviceMock.jsmock 設備。

其他類

  • ZeroClipboard將內容復制到剪切板兼容主流瀏覽器的解決方案詳細

  • html2canvashtml轉化成canvas，可以用來做截圖。詳細

  • Ink響應式html郵件框架

  • 性能測試

  • 抓取，解析RSS內容（不能跨域，所以後台要做代理，所謂的解析Rss其實就是解析xml）

  • jFeed

  • jRss簡單版的jFeed

  • scriptcam與攝像頭交互

  • cylon.js機器人框架，支持35個平台

  • Masonry一個瀑布流框架

  • devices.css移動設備邊框的外觀。做原型的時候用不錯。

    • Bootstrap相關類

  • Bootbox.js對bootstrap的彈出框做的一些封裝

  • 免費皮膚

  • AdminLTE

JS Plugins倉庫

  • jQuery Cards高質量的 jQuery 插件網站

  • jster

  • node moles

  • npmrankSort npm packages by page rank

  • YOU MIGHT NOT NEED JQUERY PLUGINS不依賴 jQuery 的 js 插件。

  • awesome-nodejs

  • Libraries.io各種語言的庫

  • OniUI去哪兒網做的一套基於Avalon的框架

    常用的移動端框架

    zepto.js

    語法與jquery幾乎一樣，會jquery基本會zepto~

    最新版本已經更新到1.16

    iscroll.js

    解決頁面不支持彈性滾動，不支持fixed引起的問題~

    實現下拉刷新，滑屏，縮放等功能~

    最新版本已經更新到5.0

    underscore.js

    筆者沒用過，不過聽說好用，推薦給大家~

    該庫提供了一整套函數式編程的實用功能，但是沒有擴展任何JavaScript內置對象。

    最新版本已經更新到1.8.2

    滑屏框架

    適合上下滑屏、左右滑屏等滑屏切換頁面的效果

    slip.js

    iSlider.js

    fullpage.js

    swiper.js

    flex布局

    flex布局目前可使用在移動中，並非所有的語法都全兼容，效果良好~

㈦ 如何通過laypage前端分頁插件實現ajax非同步分頁

本文實例為大家分享了laypage前端分頁插件，ajax非同步分頁，獲取json數據實現無刷新分頁，供大家參考，具體內容如下：
function GetList(pageIndex) {
var _this = ""
var clone_this = "";
_this = $(".BindDataList");//數據列表容器，
clone_this = _this.clone(true);
var pageSize = 25;//每頁展示的條數
$.ajax({
type: "get",
async: false,//非同步鎖定，默認為true
url: "../ashx/System/DefaultAjax.ashx",//後端處理數據，返回json格式
data: {"pageIndex": pageIndex, "pageSize": pageSize, },
contentType: "application/json; charset=utf-8",
success: function (data) {
var json = eval("(" + data + ")");
if (json.PageCount > 0) //數據總條數
{
_this.html("");
for (var i = 0; i < json.rows.length ; i++) {
var html = "<li>json數據</li>";
_this.append(html);
}
jsonpage(json, pageIndex, pageSize);
}
else {
_this.html("");
_this.append("");
}
}
});
}

function jsonpage(json, pageIndex, pageSize) {
var coun = json.PageCount;//總數據條數
var pagecount = coun % pageSize == 0 ? coun / pageSize : coun / pageSize + 1;//計算多少頁
var laypageindex = laypage({
cont: 'project_page', //容器。值支持id名、原生dom對象，jquery對象。
skin: '#fb771f',
pages: pagecount, //通過後台拿到的總頁數
curr: pageIndex, //初始化當前頁
first: '|<', //將首頁顯示為數字1,。若不顯示，設置false即可
last: '>|', //將尾頁顯示為總頁數。若不顯示，設置false即可
prev: '<', //若不顯示，設置false即可
next: '>', //若不顯示，設置false即可
jump: function (obj, first) { //觸發分頁後的回調
if (!first) { //點擊跳頁觸發函數自身，並傳遞當前頁：obj.curr
SearchHotTag(obj.curr);
}
}
});
}

㈧ jquery分頁插件哪個比較好

maxentries 總條目數 必選參數，整數

items_per_page 每頁顯示的條目數 可選參數，默認是10

num_display_entries 連續分頁主體部分顯示的分頁條目數 可選參數，默認是10

current_page 當前選中的頁面 可選參數，默認是0，表示第1頁

num_edge_entries 兩側顯示的首尾分頁的條目數 可選參數，默認是0

link_to 分頁的鏈接 字元串，可選參數，默認是"#"

prev_text 「前一頁」分頁按鈕上顯示的文字 字元串參數，可選，默認是"Prev"

next_text 「下一頁」分頁按鈕上顯示的文字 字元串參數，可選，默認是"Next"

ellipse_text 省略的頁數用什麼文字表示 可選字元串參數，默認是"..."

prev_show_always 是否顯示「前一頁」分頁按鈕 布爾型，可選參數，默認為true，即顯示「前一頁」按鈕

next_show_always 是否顯示「下一頁」分頁按鈕 布爾型，可選參數，默認為true，即顯示「下一頁」按鈕

callback 回調函數 默認無執行效果

㈨ 為什麼用前端分頁插件

前端分頁插件可以減少代碼量更能編寫漂亮的代碼。

㈩ pagehelper搭配什麼前端分頁插件比較好

應該是免費的，我現在正在使用。特別簡單，很方便。主要是兼容市面上主流的資料庫。為開發者點個贊

閱讀全文

與前端分頁插件相關的內容

本站內容整理源於互聯網，如有問題請聯系解決。
Copyright design: www.gotrillian.com since 2022