Comments (6)
+1
from jsgrid.
Pager template sounds interesting.
Thank you for the request!
from jsgrid.
I am trying to custom external-pager. I want {first} and {last} can be show when I watch first-page and last-page(maybe can not click but show the button). Further more, I want to make a text box to let user can navigate to which page he wants . Is it available way? Below is my code
(function (jsGrid, $, undefined) {
var
FIRST_PAGE_PLACEHOLDER = "{first}",
PAGES_PLACEHOLDER = "{pages}",
PREV_PAGE_PLACEHOLDER = "{prev}",
NEXT_PAGE_PLACEHOLDER = "{next}",
LAST_PAGE_PLACEHOLDER = "{last}",
PAGE_INDEX_PLACEHOLDER = "{pageIndex}",
PAGE_COUNT_PLACEHOLDER = "{pageCount}",
ITEM_COUNT_PLACEHOLDER = "{itemCount}",
EMPTY_HREF = "javascript:void(0);";
var passGrid = function (config) {
jsGrid.Grid.call(this, config);
};
passGrid.prototype = $.extend(jsGrid.Grid.prototype, {
_createPagerContainer: function () {
var pagerContainer = this.pagerContainer || $("<div>").appendTo(this._container);
return $(pagerContainer).addClass(this.pagerContainerClass);
},
_refreshPager: function () {
var $pagerContainer = this._pagerContainer;
$pagerContainer.empty();
if (this.paging) {
$pagerContainer.show()
.append(this._createPager());
} else {
$pagerContainer.hide();
}
},
_createPages: function () {
var pageCount = this._pagesCount(),
pageButtonCount = this.pageButtonCount,
firstDisplayingPage = this._firstDisplayingPage,
pages = [],
pageNumber;
if (firstDisplayingPage > 1) {
pages.push(this._createPagerPageNavButton(this.pageNavigatorPrevText, this.showPrevPages));
}
for (var i = 0, pageNumber = firstDisplayingPage; i < pageButtonCount && pageNumber <= pageCount; i++, pageNumber++) {
pages.push(pageNumber === this.pageIndex
? this._createPagerCurrentPage()
: this._createPagerPage(pageNumber));
}
if ((firstDisplayingPage + pageButtonCount - 1) < pageCount) {
pages.push(this._createPagerPageNavButton(this.pageNavigatorNextText, this.showNextPages));
}
return pages;
},
_createPager: function () {
var pageIndex = this.pageIndex,
pageCount = this._pagesCount(),
itemCount = this._itemsCount(),
pagerParts = this.pagerFormat.split(" ");
pagerParts = $.map(pagerParts, $.proxy(function (pagerPart) {
var result = pagerPart;
if (pagerPart === PAGES_PLACEHOLDER) {
result = this._createPages();
} else if (pagerPart === FIRST_PAGE_PLACEHOLDER) {
result = this._createPagerNavButton(this.pageFirstText, 1);
} else if (pagerPart === PREV_PAGE_PLACEHOLDER) {
result = this._createPagerNavButton(this.pagePrevText, pageIndex - 1);
} else if (pagerPart === NEXT_PAGE_PLACEHOLDER) {
result = this._createPagerNavButton(this.pageNextText, pageIndex + 1);
} else if (pagerPart === LAST_PAGE_PLACEHOLDER) {
result = this._createPagerNavButton(this.pageLastText, pageCount);
} else if (pagerPart === PAGE_INDEX_PLACEHOLDER) {
result = pageIndex;
} else if (pagerPart === PAGE_COUNT_PLACEHOLDER) {
result = pageCount;
} else if (pagerPart === ITEM_COUNT_PLACEHOLDER) {
result = itemCount;
}
return $.isArray(result) ? result.concat([" "]) : [result, " "];
}, this));
this.pagerClass = "pagination";
var $pager = $("<ul>").addClass(this.pagerClass)
.append(pagerParts);
return $pager;
},
_createPagerNavButton: function (text, pageIndex) {
return this._createPagerButton(text, this.pagerNavButtonClass, function () {
this.openPage(pageIndex);
});
},
_createPagerPageNavButton: function (text, handler) {
return this._createPagerButton(text, this.pagerNavButtonClass, handler);
},
_createPagerPage: function (pageIndex) {
return this._createPagerButton(pageIndex, this.pageClass, function () {
this.openPage(pageIndex);
});
},
_createPagerButton: function (text, css, handler) {
var $link = $("<a>").attr("href", EMPTY_HREF)
.html(text)
.on("click", $.proxy(handler, this));
return $("<li>").addClass(css).append($link);
},
_createPagerCurrentPage: function () {
var that = this, pagesCount = that._pagesCount(),
pageIndex = that.pageIndex,
$input = $('<input>').attr('type', 'text').attr('style', 'width:45%')
.val(pageIndex)
.on("change", function () {
//change page number event
}), $total = $('<label>').text('/' + pagesCount
);
$span = $('<span>').attr('style', 'width: 21%;height: 18px;display: inline-block;')
.append($input).append($total);
return $("<li>")
.addClass(this.pageClass)
.addClass(this.currentPageClass).append($span);
}
});
jsGrid.Grid = passGrid;
}(jsGrid, jQuery));
from jsgrid.
Do you have any issue with your solution? Or it works fine, and you just want to share your approach? Anyway, I agree your request is valuable and worth to be implemented.
from jsgrid.
Closed with:
Now unnecessary pager nav buttons just hidden. They can be shown if necessary with css.
For completely custom pager the new option pagerRenderer
was introduced. It accepts single parameter - config with the following format { pageIndex, pageCount }
, and should return custom pager.
from jsgrid.
Hi Guys,
I want to add text box in the pagerFormat, as Chenghsuan mentioned above with image. Kindly suggest a way or provide the code snippet which could help me to solve this issue.
from jsgrid.
Related Issues (20)
- Js grid get cell value cellClick HOT 2
- Need help datetime-local HOT 1
- Is there an official fork that is being heavily used and actively maintained? HOT 1
- Jsgrid select with search box HOT 1
- Detect value of selected value when inserting a new item
- 数据操作时,有没有直接失去焦点保存数据?
- JS grid load data above 5000
- editTemplate on row change error throw $inputFrom was not an function HOT 1
- Multiselect issue.
- Help with a php & Mysql
- Help needed with JsGrid loadData function after I upgraded an old project to .net 7.0 HOT 1
- Help needed with JsGrid loadData function after I upgraded an old project to .net 7.0
- Using autocomplete component with Select2
- How do I validate a DatePicker field? HOT 1
- Loading by Page + Ajax
- how to add password input type in jsgrid HOT 1
- Select type validate required not working in jsgrid
- How to render 1 table instead of 2 tables - First Table(Header, Filter and Insert Row) and Second Table(Item Row) HOT 1
- Load info after save and select option HOT 3
- Manipulating data in a custom field before a row is deleted
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jsgrid.