Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use the bootstrap-paginator paging plug-in. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

First of all, we need to understand what the Bootstrap framework is, which we have explained before, but those who do not know it can learn and understand it in the Bootstrap tutorial.

I. introduction of parameters

The default value of the parameter name data type describes the version of bootstrap used by bootstrapMajorVersionnumber2. If the version of bootstrap is 2.x, the div element must be used for paging. 3.X paging must use the ul > li element. Note that it corresponds to the bootstrap version. Sizestring "normal" sets the display size of the control, and the allowed value: mini,small,normal,large. Alignmentstring "left" sets the alignment of the control. The allowed value is left,center,right. ItemContainerClassfunction none

This parameter takes a function and returns a string that is a class class style that we define. This function is called when each action button within the control is rendered (render), passing in information about the button as an argument.

Parameter: type,page,current.

Type: the type of action button for this control. (first, prev, page, next, last)

Page: which page is this button?

Current: which page is the current page of the entire control.

CurrentPagenumber1

Sets the current page.

NumberOfPagesnumber5

Sets the number of pages displayed by the control. That is, the number of action buttons of type "page".

TotalPagesnumber1

Sets the total number of pages.

PageUrlfunction none

In fact, each action button within the control is rendered as a hyperlink so that the link address can be set dynamically for each action button. This parameter is a function, and the accepted parameter is: type,page,current.

For example: "http://baidu.com/list/page/"+page

ShouldShowPageboolean/functiontrue

This parameter is used to set whether an action button is displayed, but a Boolean value can also be a function. When true, displays. When false, it is not displayed. If the parameter is a function, you need to return a Boolean value, which is used to determine whether it is displayed or not.

The function takes three parameters: type, page, and current.

The advantage of using the function is that you can display and control each action button.

ItemTextsfunction none

Controls the display text of each action button.

Pass three arguments to the function: type, page, and current.

With this parameter, we can change the English on the operation button into Chinese. Such as first-- > home page, last-- > last page.

TooltipTitlesfunction none

Sets the title property of the action button.

Pass three parameters: type, page, and current.

UseBootstrapTooltipbooleanfalse sets whether to use Bootstrap's built-in tooltip. True is used, false is not used, and default is not used.

Note: if you use it, you need to introduce the bootstrap-tooltip.js plug-in.

BootstrapTooltipOptionsobject none

Default: {

Animation: true

Html: true

Placement: 'top'

Selector: false

Title: ""

Container: false

}

This parameter is a js object, which is passed to the bootstrap-tooltip plug-in when the parameter useBootstrapTooltip (upstairs) is true.

OnPageClickedfunction none

Bind the click event for the action button.

Parameters: event, originalEvent, type,page.

OnPageChangedfunction none

Bind the page number change event for the action button.

Parameters: event, oldPage, newPage.

What is marked in red in this parameter is a parameter that we need to select.

II. Public order

Command name parameter return value description showpage none

The show command is used to jump directly to a specific page and has the same effect as clicking the action button directly.

How to use: $('# example'). BootstrapPaginator ("show", 3) jump directly to page 3

$('# example'). BootstrapPaginator ("show", 100) jumps directly to 100 pages.

ShowFirst none

The showFirst command is used to jump directly to the front page, the same as clicking the first button.

Usage: $('# example') .bootstrapPaginator ("showFirst")

ShowLast none

The showFirst command is used to jump directly to the last page, the same as clicking the last button.

Usage: $('# example') .bootstrapPaginator ("showLast")

ShowPrevious none

The showPrevious command is used to jump directly to the previous page.

Usage: $('# example') .bootstrapPaginator ("showPrevious")

ShowNext none

The showNext command is used to jump directly to the next page.

Usage: $('# example') .bootstrapPaginator ("showNext")

GetPages has no object

The getPages command returns the page number displayed in the current control, as an array.

Usage: var arra = $('# example') .bootstrapPaginator ("getPages")

SetOptionsobject none

The setOptions command is used to reset the parameters.

Usage: $('# example') .bootstrapPaginator ("setOptions", newoptions)

Referring to the above command, let's take a look at the following example, as shown below:

$('# example'). BootstrapPaginator ("show", 3) in this command, we can know that this is the show command; $('# example') .bootstrapPaginator ("getPages") calls the getPages command

III. Events

The event name callback function describes the page-clickedfunction (event,originalEvent,type,page) {} parameter event,originalEvent is two jquery event objects. You can refer to the jquery related documentation page-changeedfunction (event, oldPage, newPage) as above

For the Bootstrap Paginator event, we are provided with two events: page-clicked and page-changed. And the two events used as parameters correspond to onPageClicked and onPageChanged, respectively, as shown above.

IV. Demo

Let's take a look at a related page code, as follows:

Title serial number, name, sex, age Let currentPage = 1 Let pageSize = 3 Function render () {$.ajax ({url: ". / setPage.php", data: {page: currentPage, pageSize: pageSize}, dataType: "json" Success: function (result) {/ / render the data to the page $("tbody") .html (template ("tableTemp", {item:result})) / / call the paging function. Parameters: current page, total number of pages (divided by the total number of pages displayed per page, rounded up), ajax function setPage (currentPage, Math.ceil (result [0] .size / pageSize) Render)}} render () / * * @ param pageCurrent current page * @ param pageSum Total pages * @ param callback call ajax * / function setPage (pageCurrent, pageSum, callback) {$(".pagination") .bootstrapPaginator ({/ / set version number bootstrapMajorVersion: 3 / / display page currentPage: pageCurrent, / / Total pages totalPages: pageSum, / / execute this function when the action button is clicked, call the ajax rendering page onPageClicked: function (event,originalEvent,type,page) {/ / assign the page number currently clicked to currentPage, and call ajax Rendering page currentPage = page callback & & callback ()})} this is the end of the article on "how to use the bootstrap-paginator paging plugin" Hope that the above content can be helpful to you, so that you can learn more knowledge, if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.