MUI 上下啦分页 触发列表AJAX 无整理 比较乱

17 篇文章 0 订阅
2 篇文章 0 订阅

@{
Layout = null;
}

装车
<!--标准mui.css-->
<link href="~/mui-master/examples/hello-mui/css/mui.min.css" rel="stylesheet" />
<!--App自定义的css-->
<link href="~/mui-master/examples/hello-mui/css/app.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.9.1.js"></script>
<style>

    .title {
        margin: 20px 15px 10px;
        color: #6d6d72;
        font-size: 15px;
    }

    .oa-contact-cell.mui-table .mui-table-cell {
        padding: 11px 0;
        vertical-align: middle;
    }

    .oa-contact-cell {
        position: relative;
        margin: -11px 0;
    }

    .oa-contact-avatar {
        width: 75px;
    }

        .oa-contact-avatar img {
            border-radius: 50%;
        }

    .oa-contact-content {
        width: 100%;
    }

    .oa-contact-name {
        margin-right: 20px;
    }

    .oa-contact-name, oa-contact-position {
        float: left;
    }
</style>

装车

<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
    <div class="mui-scroll">
        <!--数据列表-->
        <ul class="mui-table-view mui-table-view-chevron" id="mui-table-view">
        </ul>
    </div>
</div>

<input type="hidden" id="limit" name="limit" value="10" />
<input type="hidden" id="page" name="page" value="1" />
<input type="hidden" id="counts" name="counts" value="0" />
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用muiajax方法来请求数据,并使用模板引擎生成列表分页。 首先,你需要引入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生成列表分页了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值