mui ajax 生成列表 与分页
时间: 2024-05-04 22:20:37 浏览: 12
你可以使用mui的ajax方法来请求数据,并使用模板引擎生成列表和分页。
首先,你需要引入mui和模板引擎库。可以在HTML文件中添加以下代码:
```
<!-- MUI CSS -->
<link rel="stylesheet" href="//cdn.staticfile.org/mui/3.7.1/css/mui.min.css">
<!-- MUI JS -->
<script src="//cdn.staticfile.org/mui/3.7.1/js/mui.min.js"></script>
<!-- 模板引擎库 -->
<script src="//cdn.staticfile.org/template.js/0.7.1/template.min.js"></script>
```
接下来,你可以在JS文件中使用ajax方法请求数据。例如:
```
mui.ajax('/api/data', {
type: 'get',
success: function(data) {
// 使用模板引擎生成列表
var html = template('list-template', data);
document.getElementById('list').innerHTML = html;
},
error: function(xhr, type, errorThrown) {
// 错误处理
}
});
```
这里的`/api/data`是你后端提供的接口地址,可以根据实际情况修改。`list-template`是你在HTML中定义的模板ID,例如:
```
<script id="list-template" type="text/html">
{{each data}}
<li>{{name}}</li>
{{/each}}
</script>
```
这里使用了模板引擎的语法,可以根据自己的需求修改。
最后,你还需要添加分页的代码。可以使用mui的分页插件mui-pager。例如:
```
<div id="pager" class="mui-pager">
<button class="mui-btn mui-btn-prev">上一页</button>
<button class="mui-btn mui-btn-next">下一页</button>
</div>
<script>
mui('#pager').pager({
page: 1,
pageSize: 10,
pageCount: 5,
prevText: '上一页',
nextText: '下一页',
gotoText: '跳转到',
showNumber: true,
showSkip: true,
styles: {
prev: 'mui-btn mui-btn-prev',
next: 'mui-btn mui-btn-next',
active: 'mui-active',
number: 'mui-btn',
skip: 'mui-pager-skip',
disabled: 'mui-disabled'
},
onChange: function(page) {
// 切换页码时重新请求数据
getData(page);
}
});
</script>
```
这里的`getData`函数是你前面定义的请求数据的函数,可以根据自己的需求修改。
这样,你就可以使用mui ajax生成列表和分页了。