xm-select/docs/mds/XM08.md

分页

启用分页

xmSelect.render({
	//...
	paging: true,
})

:::demo

<div id="demo1" class="xm-select-demo"></div>

<script>
var demo1 = xmSelect.render({
	el: '#demo1', 
	paging: true,
	data: [
		{name: '张三', value: 1},
		{name: '李四', value: 2},
		{name: '王五', value: 3},
		{name: '赵六', value: 4},
		{name: '苹果', value: 5},
		{name: '香蕉', value: 6},
		{name: '凤梨', value: 7},
		{name: '葡萄', value: 8},
		{name: '樱桃', value: 9},
		{name: '车厘子', value: 10},
		{name: '火龙果', value: 11},
	]
})
</script>

:::

自定义条数

每页3条

xmSelect.render({
	//...
	paging: true,
	pageSize: 3,
})

:::demo

<div id="demo2" class="xm-select-demo"></div>

<script>
var demo2 = xmSelect.render({
	el: '#demo2', 
	paging: true,
	pageSize: 3,
	data: [
		{name: '张三', value: 1},
		{name: '李四', value: 2},
		{name: '王五', value: 3},
		{name: '赵六', value: 4},
		{name: '苹果', value: 5},
		{name: '香蕉', value: 6},
		{name: '凤梨', value: 7},
		{name: '葡萄', value: 8},
		{name: '樱桃', value: 9},
		{name: '车厘子', value: 10},
		{name: '火龙果', value: 11},
	]
})
</script>

:::

搜索+分页

xmSelect.render({
	//...
	paging: true,
	pageSize: 5,
	filterable: true,
})

:::demo

<div id="demo3" class="xm-select-demo"></div>
<button class="btn" id="demo3-5">每页5条</button>
<button class="btn" id="demo3-10">每页10条</button>
<button class="btn" id="demo3-20">每页20条</button>

<script>
var data = [];
for(var i = 0 ; i < 100 ; i++ ){
	data.push({
		name: '测试数据' + i,
		value: i,
	})
}

var demo3 = xmSelect.render({
	el: '#demo3', 
	paging: true,
	pageSize: 5,
	filterable: true,
	data
})

document.getElementById('demo3-5').onclick = function(){
	demo3.update({
		pageSize: 5
	})
}

document.getElementById('demo3-10').onclick = function(){
	demo3.update({
		pageSize: 10
	})
}

document.getElementById('demo3-20').onclick = function(){
	demo3.update({
		pageSize: 20
	})
}

</script>

:::

搜索 + 分页 无数据 不展示分页

xmSelect.render({
	//...
	paging: true,
	pageSize: 3,
	filterable: true,
	pageEmptyShow: false,
})

:::demo

<div id="demo4" class="xm-select-demo"></div>

<script>
var demo4 = xmSelect.render({
	el: '#demo4', 
	paging: true,
	pageSize: 3,
	filterable: true,
	pageEmptyShow: false,
	data: [
		{name: '张三', value: 1},
		{name: '李四', value: 2},
		{name: '王五', value: 3},
		{name: '赵六', value: 4},
		{name: '苹果', value: 5},
		{name: '香蕉', value: 6},
		{name: '凤梨', value: 7},
		{name: '葡萄', value: 8},
		{name: '樱桃', value: 9},
		{name: '车厘子', value: 10},
		{name: '火龙果', value: 11},
	]
})
</script>

:::