【jquery模仿net控件】簡單分頁控件1.0，附上gridview使用測試

前言

最近項目需求需要用到jquery的分頁功能，是以就自己模仿着其它地方的寫了一個，現在配合着原來寫的gridview一起使用看看效果。

我們項目有個地方有點痛苦，他不能傳回資料的總記錄數，這個bug不修複我這邊都隻能動态附初始值，另外首頁尾頁等因為剛剛寫起皆暫時未實作，

等後面點調整後，有必要便一起發出來。

截圖

分頁代碼使用示例

複制代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

//initGrid

var gridDataBind = function (data) {

var tb = $("#tb");

var grid = new GridView();

grid.style = {

width: '70%'

};

grid.attribute = {

className: 'infolist_hr'

grid.parentEl = tb;

grid.dataSource = data;

grid.colModel = [{

'th': { 'title': '<input type="checkbox" class="th_select" />', 'attribute': { 'className': 'common'} },

'td': { 'template': '<input type="checkbox" class="td_select" />', 'style': { 'width': '2%' }, 'attribute': { 'className': 'common indentten'} }

}, {

'th': { 'title': '标題', 'attribute': { 'className': 'common'} },

'td': { 'template': '{%title%}', 'style': { 'width': '40%' }, 'attribute': { 'className': 'common indentten'} }

'th': { 'title': '來源', 'attribute': { 'className': 'common'} },

'td': { 'template': '{%from%}', 'style': { 'width': '20%' }, 'attribute': { 'className': 'common indentten'} }

'th': { 'title': '時間', 'attribute': { 'className': 'common'} },

'td': { 'template': '{%created%}', 'style': { 'width': '15%' }, 'attribute': { 'className': 'common indentten'} }

'th': { 'title': '', 'attribute': { 'className': 'common'} },

'td': { 'template': '<span class="edit" style="cursor: pointer;" >編輯</span>&nbsp;&nbsp;<span class="delete" style="cursor: pointer;" >删除</span>', 'style': { 'width': '13%' }, 'attribute': { 'className': 'common indentten'} }

}];

grid.render();

};

var bind = function (start, limit) {

if (!start) {

start = 0;

}

if (!limit) {

limit = 9;

var url = "http://113.142.30.139/tpw-webapp/rest/proxy/news_ln_statistics?jsonp=?&start=" + start + "&limit=" + limit;

tb.html("資料正在加載......");

$.getJSON(url, function (data) {

tb.html("");

if (data && typeof (data) == 'string') {

data = eval('(' + data + ')');

} //if

if (data.data) {

data = data.data;

}

gridDataBind(data);

}); //$.getJSON(

var pageChanged = function (page) {

var start = page.pageIndex * page.cfg.pageSize;

var limit = page.cfg.pageSize;

bind(start, limit);

return false;

var initPage = function () {

var page = $('#page');

var url = "http://113.142.30.139/tpw-webapp/rest/proxy/news_ln_statistics";

var page = new Pagination({

parentEl: page,

pageChanged: pageChanged

});

page.allRow = 100;

page.render();

$(document).ready(function () {

bind();

initPage();

}); //$(document)

</script>

</head>

<body>

</div>

</body>

</html>

分頁控件代碼

var Pagination = function (_cfg) {

var sender = this;

this.cfg = {

parentEl: $('body'),

pageSize: 10,

pageNum: 7, //每頁放幾個顯示的1,2,3,4

pageEdge: 2,

linkTo: '#',

linkText: 'pageno',

preText: '上一頁',

nextText: '下一頁',

ellipseText: "...",

pageChaged: function () { return false; }

};

if (_cfg) {

$.each(_cfg, function (key, value) {

sender.cfg[key] = value;

});

}

this.pageIndex = 0;

this.allRow = 0;

this.totalPage = 0;

this.el = null;

this.visible = false;

this.prePage = null;

this.nextPage = null;

this.numPage = null;

};

Pagination.prototype.render = function () {

this.onInit();

this.preRender();

Pagination.prototype.preRender = function () {

var scope = this;

var prePage = this.prePage;

var nextPage = this.nextPage;

var numPage = this.numPage;

var total = this.totalPage;

var index = this.pageIndex;

prePage.attr('class', 'prev');

if (index == 0) {

prePage.attr('class', 'current prev');

nextPage.attr('class', 'next');

if (index == total - 1) {

nextPage.attr('class', 'current next');

$.each(numPage, function (i, item) {

item.removeAttr('class');

if (scope.pageIndex == parseInt(item.html()) - 1) {

item.attr('class', 'current');

}

});

Pagination.prototype.onInit = function () {

this.init();

this.initHtml();

this.eventBind();

Pagination.prototype.init = function () {

var cfg = this.cfg;

var totalPage = this.totalPage;

var allRow = this.allRow;

var pageSize = cfg.pageSize;

this.totalPage = allRow % pageSize == 0 ? allRow / pageSize : allRow / pageSize + 1;

this.totalPage = parseInt(this.totalPage);

if (totalPage <= 1) {

this.visible = false;

Pagination.prototype.getNumPage = function () {

var pageNum = cfg.pageNum;

var limit = pageNum / 2;

var _limit = parseInt(limit);

limit = limit > _limit ? _limit + 1 : _limit;

var numPage = [];

var numArr = [];

for (var i = 0; i < pageNum; i++) {

if (index < limit) {

numArr.push(i + 1);

} else if (totalPage - index <= limit) {

numArr.push(totalPage - pageNum + i + 1);

} else {

numArr.push(index - limit + i + 2);

var elStr = '';

var linkTo = cfg.linkTo;

if (linkTo == '#') {

for (var i = 0, len = numArr.length; i < len; i++) {

var tempEl = $('<a href="#">' + numArr[i].toString() + '</a>');

numPage.push(tempEl)

} else {

var linkText = cfg.linkText;

var sign = '?';

if (linkTo.indexOf('?') != -1) {

sign = '&';

var tempEl = $('<a href="' + linkTo + sign + linkText + '=' + i.toString() + '">' + numArr[i].toString() + '</a>');

numPage.push(tempEl);

return numPage;

Pagination.prototype.initHtml = function () {

var pageInfo = $('<div class="pagination"></div>');

var _pre = '<a href="#" class="prev">上一頁</a>';

var _nex = '<a href="#" class="next">下一頁</a>';

if (linkTo != '#') {

_pre = '<a href="' + linkTo + sign + linkText + '=' + (parseInt(this.pageIndex) - 1) + '" class="prev">上一頁</a>';

_nex = '<a href="' + linkTo + sign + linkText + '=' + (parseInt(this.pageIndex) + 1) + '" class="next">下一頁</a>';

var prePage = $(_pre);

var nextPage = $(_nex);

var numPage = this.getNumPage();

pageInfo.append(prePage);

pageInfo.append(item);

pageInfo.append(nextPage);

this.el = pageInfo;

this.prePage = prePage;

this.nextPage = nextPage;

this.numPage = numPage;

cfg.parentEl.append(pageInfo);

Pagination.prototype.eventBind = function (func) {

prePage.unbind('click');

prePage.bind('click', function (e) {

if (scope.pageIndex != 0) {

scope.pageIndex = scope.pageIndex - 1;

scope.pageChanged();

item.unbind('click');

item.bind('click', function (e) {

if (scope.pageIndex != parseInt(item.html()) - 1) {

scope.pageIndex = parseInt(item.html()) - 1;

scope.pageChanged();

nextPage.unbind('click');

nextPage.bind('click', function (e) {

if (scope.pageIndex != scope.totalPage - 1) {

scope.pageIndex = scope.pageIndex + 1;

Pagination.prototype.pageChanged = function () {

scope.el.remove();

var pageChaged = cfg.pageChanged;

if (pageChaged && typeof (pageChaged) == 'function') {

pageChaged(this);

this.render();

// alert(this.pageIndex);

後續

由于各方面皆不完整，此處便不作詳細說明，有必要的話，以後整理後會形成API，但是可能沒有必要，因為代碼總的來說還是很水的......

在學習吧......

本文轉自葉小钗部落格園部落格，原文連結：http://www.cnblogs.com/yexiaochai/archive/2012/06/07/2540994.html，如需轉載請自行聯系原作者

【jquery模仿net控件】簡單分頁控件1.0，附上gridview使用測試

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條