Pagination

a paging widget based on Qt

stylesheet demo

Pagination{
	font-size:16px;
	font-family:"Microsoft YaHei UI";
	padding:8px;

	qproperty-spacing: 6;
	qproperty-totalsize: 46;
	qproperty-sizeofperpage: 2;
}

Pagination>QPushButton{
	border-radius:4px;
	color:#666;
	background:white;
}

Pagination>QPushButton:disabled{
	color:#666;
	background:transparent;
}

Pagination>QPushButton:hover{
	color:white;
	background:#86EDD9;
}

Pagination>QPushButton:selected{
	color:white;
	background:#1ABC9C;
}

Pagination>QPushButton:pressed{
	color:white;
	background:#1ABC9C;
}

Pagination{
	font-size:16px;
	font-family:"Microsoft YaHei UI";
	padding:8px;

	qproperty-spacing: 6;
	qproperty-totalsize: 46;
	qproperty-sizeofperpage: 2;
	qproperty-pageUpText: "上一页";
	qproperty-pageDownText: "下一页";
}
Pagination>QPushButton{
	border:1px solid #dce0e0;
	color:#666;
	background:white;
}
Pagination>QPushButton:selected{
	color:white;
	background:#0073A9;
}
Pagination>QPushButton:pressed{
	color:white;
	background:#0073A9;
}

Pagination{
	font-size:16px;
	font-family:"Microsoft YaHei UI";
	padding:8px;

	qproperty-spacing: 1;
	qproperty-totalsize: 46;
	qproperty-sizeofperpage: 2;
	qproperty-pageUpText: "上一页";
	qproperty-pageDownText: "下一页";
}
Pagination>QPushButton{
	color:#666;
	background:white;
	border:none;
}
Pagination>QPushButton:hover{
	color:#0073A9;
}
Pagination>QPushButton:selected{
	color:white;
	background:#0073A9;
}
Pagination>QPushButton:pressed{
	color:white;
	background:#0073A9;
}

/*your parent widget stylesheet:*/
background:#dce0e0;

paging style

pagination->setPagingStyle(new PagingStyle2);

customize your own paging style

#include "pagingutil.h"

class MyPagingStyle : public PagingUtil {
public:
	using PagingUtil::PagingUtil;

	void reCacheNumbers() override {
		curCacheNumbers.clear();
		//do your own paging cache here
	}
}

//then..
pagination->setPagingStyle(new MyPagingStyle);

Note: The curCacheNumbers stored numbers for display, or -1 if it's an ellipsis

function

properties

build the plugin(pagination_plugin.dll) project, and use pagination widget in Qt Designer

configure properties in Qt Designer property window

what's means of this properties:

public functions

• void setPagingStyle(PagingUtil* pagingStyle)
  Change the current page numbers display style.
  By default, use PagingStyle1.
  The ownership of pagingStyle is transferred to the pagination widget, and it's the widget's responsibility to delete it.
• void setCurrentPage(int number)
  Change the current selected number, the number is used to display instead of index. If the number is different from the current number, pageIndexChanged will be emit.
• void pageUp()
  Jump to previous page.
• void pageDown()
  Jump to next page.
• void pageFirst()
  Jump to the first page.
• void pageLast()
  Jump to last page.
• int getCurrentPageIndex() const
  Return current selected page index.

signals

• void pageIndexChanged(int index)
  will be emit whenever the number changes.

protected

• virtual QString numberFormat(int number) const
  Can be implemented in subclasses to reformat current display number to string, and -1 if it's an ellipsis.
• virtual void drawNumber(const QRect& rect, int number, QPainter* painter)
  Draw the number in target rect, can paint your own number display style in subclasses.
  For the hover state, to check 'hoverNumber == number'.
  For the selected state, to check 'pagingStyle->isSelectedNumber(number)'.
• virtual void drawEllipsis(const QRect& rect, int number, QPainter* painter)
  Draw an ellipsis only.
• virtual void drawPageUpBtn(const QRect& rect, QPainter* painter)
  Draw previous page button.
  For the hover state, to check 'hoverNumber == -3'.
• virtual void drawPageDownBtn(const QRect& rect, QPainter* painter)
  Draw next page button.
  For the hover state, to check 'hoverNumber == -2'.

qml

Rectangle {
	width: 600
	height: 60
	color: "#303030"

	Pagination {
		id: pagination
		anchors.right: parent.right
		anchors.rightMargin: 8
		anchors.verticalCenter: parent.verticalCenter
		pageSize: 21

		onCurrentValueChanged: {
			console.log(pagination.currentValue)
		}
	}
}