zoukankan      html  css  js  c++  java
  • ASP.NET Web API教程 分页查询

    首先增加支持分页的API方法

    public IEnumerable<UserInfo> GetUserInfos(int pageindex, int size)
            {
                return bll.Get().Skip((pageindex - 1) * size).Take(size);
            }


    增加一个新页面
    引入js

    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script src="Scripts/knockout-2.1.0.js" type="text/javascript"></script>


    编写数据迭代显示模板

    <ul data-bind="template: {name: 'userinfoTemplate', foreach: userinfos}">
            </ul>


    UL为数据迭代容器模板

    复制代码
    <script id="userinfoTemplate" type="text/html">
                <li class="userinfo">
                        <div class="info">                        
                            <strong><span data-bind="text: Name"></span></strong>
                           <span data-bind="text: Age"></span>
                        </div>
                </li>
            </script>
    复制代码


    Script id=’ userinfoTemplate’为数据项模板

    编写获取分页操作面板

    <fieldset>
    <label>第</label><input type="text" id="pageIndex" /><label>页</label><br />
    <label>每</label><input type="text" id="pageSize" /><label>条一页</label><br />
    <input type="button" value="获取" id="getButton" />
    </fieldset>


    开始编写js根据输入的页码和每页的数量获取

    复制代码
    <script type="text/javascript">
            viewModel = {
                userinfos: ko.observableArray([])
            };
            ko.applyBindings(viewModel);
            $("#getButton").click(function () {
                viewModel.userinfos([]);
                var pageSize = $('#pageSize').val();
                var pageIndex = $('#pageIndex').val();
                var url = "/api/userinfo?pageindex=" + pageIndex + '&size=' + pageSize;

                $.getJSON(url, function (data) {
                    // 根据路径得到数据
                    viewModel.userinfos(data);
                });

                return false;

            });   
        </script>
    复制代码

    最终运行得到结果获取第一页,每一页1条的情况下



    获取第一页,每页2条的情况下

  • 相关阅读:
    WOW.js – 让页面滚动更有趣
    ps快捷键
    多语言网站(如何实现网站的多语言版本?)
    什么是海外镜像点?
    Photoshop视频教程全集:从零开始学习PS全集教学视频
    Storm流计算之项目篇(Storm+Kafka+HBase+Highcharts+JQuery,含3个完整实际项目)
    升级版:深入浅出Hadoop实战开发(云存储、MapReduce、HBase实战微博、Hive应用、Storm应用)
    Hadoop2.0/YARN深入浅出(Hadoop2.0、Spark、Storm和Tez)
    基于Hadoop2.0、YARN技术的大数据高阶应用实战(Hadoop2.0YARNMa
    Spark内核源码剖析、Hadoop高端
  • 原文地址:https://www.cnblogs.com/soundcode/p/6540242.html
Copyright © 2011-2022 走看看