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:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术之路

Gridview行上下移动自己做的一个小例子(第一种方法)

今天没有什么事做,就写了一个GridView行上下移动的小例子。 方法有好多种,我先写第一种。 没有什么技术含量 思路: 把要上移或下移的id 与它的临近行的i...

1988
来自专栏跟着阿笨一起玩NET

linq to sql 扩展方法

840
来自专栏Golang语言社区

厚土Go学习笔记 | 13. 用循环和函数 实现Sqrt(x)

利用前面学习的循环和函数,来实现 Sqrt(x)。并且与math.Sqrt(x)的结果做一下比较。 这个很有意思,所以,把中间不断带入的变化值都打印出来。 使用...

3566
来自专栏木宛城主

曾今的代码系列——自己的分页控件+存储过程实现分页

项目里面的测试代码,仅供参考 LoginByAjax <title>Ajax登陆</title> <script src="Scripts/c...

2095
来自专栏菩提树下的杨过

RDLC报表多条件分组

一个报表如果要先按A分组,然后再按B分组,再按C分组...这种多条件分组情况下,RDLC报表处理起来并不方便。 只能另辟蹊径,想些歪招了: 比如有一张员工表,里...

2518
来自专栏互联网开发者交流社区

STC-单片机控制系统

2033
来自专栏C#

将文本文件的内容存储在DataSet中的方法总结

    项目中比较多的会对文件进行操作,例如文件的上传下载,文件的压缩和解压等IO操作。在.NET项目中较多的会使用DataSet,DataTable进行...

2028
来自专栏技术博客

字符串"2013/5/18 0:00:00”不是有效的 AllXsd 值

可以看到上述日期字符串当中18后面存在一个空格,就是这个空格导致的不是一个有效的AllXsd值。想让此字符串日期转换为有效的格式,可以用T来替换掉18后面的空格...

1693
来自专栏张善友的专栏

发布一个日期选择控件(ASPNET2.0)

The Coolest DHTML Calendar,这是一个在GPL下发布的JS日历程序,具有极高的可配置性,包括外观样式、显示格式、显示内容等等。默认程序...

3119
来自专栏王磊的博客

Net连接mysql的公共Helper类MySqlHelper.cs带MySql.Data.dll下载

MySqlHelper.cs代码如下: using System; using System.Collections.Generic; using System...

5629

扫码关注云+社区

领取腾讯云代金券