layui 数字步进器_QUICK UI 文档

数字分页控件

基本使用

步骤1，引入数字分页脚本

步骤2，添加HTML代码

步骤3，绑定翻页事件

$(function(){

$("#page-1").bind("pageChange",function(e,index){

top.Toast("showNoticeToast",index)

})

})

注意，这里的index是从0开始的。例如翻到第3页，则index为2

自定义属性

通过自定义页码个数和文本来显示不同的外观。例如显示可以增加页码：

也可以精简页码

含下拉框

设置showSelect为true即可。添加下拉框后需要监听下拉框的选择事件来改变每页条数。代码如下：

$(function(){

$("#page-4").bind("sizeChange",function(e,num){

top.Toast("showNoticeToast",num)

})

})

自定义下拉框数据和展开方向

下拉框默认向上展开，默认数据是10 20 50，可通过属性来自定义

含跳转框

设置showInput为true即可

综合布局

这里是一个综合的分页示例，左侧可以放置一些功能按钮等元素。代码如下：

左侧要放置的内容。如没有可去掉。

动态创建

要动态创建分页控件，则先创建构成分页控件的html标签，然后调用render()方法。代码如下：

function addPager(){

var $pager=$('

$pager.attr("total",300);

var $pagerCon = $('

左侧要放置的内容。如没有可去掉。

$pagerCon.eq(1).append($pager);

$("#pageContent").append($pagerCon);

$pager.render();

$pager.bind("pageChange",function(e,index){

top.Toast("showNoticeToast",index)

})

$pager.bind("sizeChange",function(e,num){

top.Toast("showNoticeToast",num)

})

}

动态改变属性

要动态改变分页控件属性，则先改变构成分页控件的html的属性，然后调用render()方法。这里动态改变了数据总条数，代码如下：

function changePager(){

$("#page-9").attr("total",300);

$("#page-9").render();

}

参数表

参数名

默认值

说明

total

无

数据总条数。这个参数为必填参数

pageSize

10

每页多少条记录

page

0

当前页数，从0开始，page为0代表第一页

prevText

上一页

上一页的自定义文本

nextText

下一页

下一页的自定义文本

edgePageNum

1

当页码两边出现省略号时，两边的页码个数

centerPageNum

4

当页码两边出现省略号时，中间的页码个数

showSelect

false

是否出现下拉框，用于选择每页多少条

selWidth

55

下拉框宽度

selectDirection

top

可选值有top、bottom，自定义下拉框的展开方向

selectData

{"list":[{"key":10,"value":10},{"key":20,"value":20},{"key":50,"value":50}]}

用于自定义下拉框的数据

showInput

false

是否出现用于跳转的文本框

pageChange事件

点击分页时触发的事件，传递参数idx表示分页后的页面，从0开始

sizeChange事件

切换每页条数事件，传递num表示切换后每页的数据条数

render()

当动态创建或动态改变分页控件属性时，最后需要调用render()来更新