专栏首页阿炬.NETSUI分页组件和avalon搞定ajax无刷新分页

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 条评论
登录 后参与评论

相关文章

  • SQL Server2000导出数据时包含主键、字段默认值、描述等信息

    阿炬
  • OpenSNS开发笔记(1)

    阿炬
  • Sublime Text3添加到右键菜单,"用 SublimeText3 打开"

    在Sublime Text3安装目录下新建一个文件 sublime_addright.inf

    阿炬
  • 零基础入门 20: UGUI DropDown

    (题外话,因为这期分享中段制作之后,微信平台抽疯,Gif图无法使用,导致我不得不尝试用其他的方式来让文章看起来没那么死板,在后面的部分展示中,我插入了视频文件而...

    韩东吉
  • 干货 | 舆论事件频发 大数据如何引导网络舆情

    维克托·迈尔·舍恩伯格在其著作《大数据时代》中提到,大数据带来的信息风暴正在变革我们的生活、工作和思维,大数据开启了一次重大的时代转型。 奥巴马政府将大数据定...

    灯塔大数据
  • WEB前端开发成长指南

    小 编注:相比起网页射击狮,操纵代码的前端攻城狮凭着双手在键盘巴拉巴拉敲出的字符,就能赋予二次元的静态页面生命,各种lovely 的~~fabulous的~~e...

    shirayner
  • c++之深拷贝和浅拷贝

    在堆区开辟内存存储数据之后,如果不自己定义拷贝构造函数,那么系统会调用默认的拷贝构造函数,这种情况下就是浅拷贝,此时,p2和p1的m_height都指向同一块地...

    西西嘛呦
  • 烦人的 Git

    Git对于新手来说,真的很烦人哎,好在找到了好工具 —— PyCharm 使用PyCharm进行代码管理 在VCS里有Git,里面有常用的操作,clone、pu...

    小歪
  • PDFBox创建并打印PDF文件, 以及缩放问题的处理.

    PDFBox带了一些很方便的API, 可以直接创建 读取 编辑 打印PDF文件. 创建PDF文件 1 public static byte[] cre...

    用户1216491
  • Python3中的字符串处理小技巧

    python编程虽然有很多库函数可以使用,但是掌握一些必要的编程技巧也是非常重要的,如果你熟练使用诸如引用计数、类型检查、数据操作、使用堆栈、管理变量、消除列表...

    深度学习与Python

扫码关注云+社区

领取腾讯云代金券