前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >SUI分页组件和avalon搞定ajax无刷新分页

SUI分页组件和avalon搞定ajax无刷新分页

作者头像
阿炬
发布2018-05-11 14:37:51
1.6K0
发布2018-05-11 14:37:51
举报
文章被收录于专栏:阿炬.NET
代码语言:javascript
复制
<div ms-controller="main">
    <h2 class="pagination-centered">{{ title }}</h2>
    <form method="get" action="" class="sui-form" style="margin-bottom:5px;">
        重量:<input class="input-medium" type="text" name="weight" value="@ViewBag.weight" id="weight" />
        内容:<input class="input-medium" type="text" name="content" value="@ViewBag.content" id="content" />
        解释:<input class="input-medium" type="text" name="intro" value="@ViewBag.intro" id="intro" />
        每页:<input class="input-mini" type="text" name="pageSize" value="@ViewBag.pageSize" id="pageSize" />
        <input class="sui-btn btn-medium btn-primary" type="submit" name="search" value="查询" id="search" />
    </form>
    <table class="sui-table table-zebra table-hover table-primary">
        <thead>
            <tr>
                <th width="40">重量</th>
                <th width="230">内容</th>
                <th>解释</th>
            </tr>

        </thead>
        <tbody>
            <tr ms-repeat="datalist">
                <td style="text-align:center;">{{ el.weight }}</td>
                <td>{{ el.content | html }}</td>
                <td>{{ el.intro | html }}</td>
            </tr>

        </tbody>


    </table>

    <div id="pager">

    </div>


</div>

<script type="text/javascript">
    
    $(function(){
        
        var vm=avalon.define({
            $id:"main",
            title: "称骨算命",
            datalist: [{"weight":"0","content":"内容","intro":"注解"}]
        });

       var loadData = function (pageIndex,pageSize,weight,content,intro) {
            var itemsCount = 0;
            $.getJSON("/home/getdata", { "page": pageIndex, "size": pageSize,"weight":weight,"content":content,"intro":intro }, function (data) {
                itemsCount = data.total;
                vm.datalist = data.rows;

                $('#pager').pagination({
                    itemsCount: data.total,
                    pageSize: pageSize,
                    currentPage: pageIndex,
                    displayPage: 6,
                    displayInfoType: "itemsCount",
                    styleClass: ['pagination-large'],
                    showCtrl: true,
                    onSelect: function (num) {
                        loadData(num, pageSize, weight, content, intro);
                    }
                });



            });

        };
        
       loadData(1,$("#pageSize").val(),$("#weight").val(),$("#content").val(),$("#intro").val());

    });




</script>

1、控制器

代码语言:javascript
复制
        public ActionResult GetData(int page=1,int size=10,string weight="",string content="",string intro="")
        {
            int itemsCount = 0;
            int pageSize = size;
            int pageIndex = page;

            string where = "1=1";
            if (!string.IsNullOrEmpty(weight))
            {
                where += " and weight = '" + weight + "'";
            }
            if (!string.IsNullOrEmpty(content))
            {
                where += " and content like '%" + content + "%'";
            }
            if (!string.IsNullOrEmpty(intro))
            {
                where += " and intro like '%" + intro + "%'";
            }

           // List<chenggu> list = DBFast.Select<chenggu>(pageIndex, pageSize, where, out itemsCount);


            using (MAction action = new MAction("chenggu"))
            {
                return Content(action.Select(pageIndex, pageSize, where, out itemsCount).ToJson());   

            }

            //var data=new {Total=itemsCount,DataList=list};
            //return Json( data, JsonRequestBehavior.AllowGet);
        }

View:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015-06-22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档