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

<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、控制器

 

        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：

 

转载于:https://www.cnblogs.com/quejuwen/p/4593769.html