layui分页page=true容易踩的坑

前台代码：

@{
    ViewBag.Title = "layuiTest";
}
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="~/Content/layui/css/layui.css" rel="stylesheet" />
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->


<table class="layui-hide" id="test"></table>

<script src="~/Content/js/jquery-1.9.1.js"></script>
 
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<div class="demoTable">
    搜索ID：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>

<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>


<div id="test1"></div>
<ul id="biuuu_city_list"></ul>
<script src="~/Content/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('laypage', function () {
        var laypage = layui.laypage;
        var data = [
            '北京',
            '上海',
            '广州',
            '深圳',
            '杭州',
            '长沙',
            '合肥',
            '宁夏',
            '成都',
            '西安',
            '南昌',
            '上饶',
            '沈阳',
            '济南',
            '厦门',
            '福州',
            '九江',
            '宜春',
            '赣州',
            '宁波',
            '绍兴',
            '无锡',
            '苏州',
            '徐州',
            '东莞',
            '佛山',
            '中山',
            '成都',
            '武汉',
            '青岛',
            '天津',
            '重庆',
            '南京',
            '九江',
            '香港',
            '澳门',
            '台北'
        ];
        //执行一个laypage实例
        laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            , count: data.length //数据总数，从服务端得到
            , theme: '#062EFB'  //自定义主题。支持传入：颜色值，或任意普通字符  theme: 'xxx' /
            , hash: 'fenye' //自定义hash值
            , limits: [14, 30, 20, 10, 60]//每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框
            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
            , groups: 5
            , curr: 5
            , count: 999564
            , jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
               // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                //console.log(obj.limit); //得到每页显示的条数
                //模拟渲染
                document.getElementById('biuuu_city_list').innerHTML = function () {
                    var arr = []
                        , thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);

                    console.log(data);
                    console.log(obj.curr * obj.limit - obj.limit);
                    console.log( obj.limit);
                    console.log(thisData);
                    layui.each(thisData, function (index, item) {
                        console.log(index, item);
                        arr.push('<li>' + item + '</li>');
                    });
                    return arr.join('');
                }();
                //首次不执行
                if (!first) {
                    //do something
                }
            }
        });
    });
</script>
<script>

    layui.use('table', function () {
        var table = layui.table;
         
        table.render({
            elem: '#LAY_table_user'
            , url: '/test/getlayuiData2/'
            , cols: [[
                { checkbox: true, fixed: true }
                , { field: 'id', title: 'ID', width: 80, sort: true, fixed: true }
                , { field: 'username', title: '用户名', width: 80 }
                , { field: 'sex', title: '性别', width: 80, sort: true }
                , { field: 'city', title: '城市', width: 80 }
                , { field: 'sign', title: '签名' }
                , { field: 'experience', title: '积分', sort: true, width: 80 }
                , { field: 'score', title: '评分', sort: true, width: 80 }
                , { field: 'classify', title: '职业', width: 80 }
                , { field: 'wealth', title: '财富', sort: true, width: 135 }
            ]]
            , id: 'testReload'
            , page: true
            , height: 310
        });
        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        key: {
                            id: demoReload.val()
                        }
                    }
                }, 'data');
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script> 

后端代码：

public   string getlayuiData2(int ? page=1,int ? limit=10)
        {
            string serviceUrl = string.Format("https://www.layui.com/demo/table/user/?page=        {0}&limit={1}", page, limit);
               RestClient client = new RestClient(serviceUrl);
            string strurl = client.Get(serviceUrl);

            return strurl;
        }

这里需要一个http转网页方法：

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Text;

namespace WX_Card.CardUtility.Tool
{
    public class RestClient
    {
        private string BaseUri;
        public RestClient(string baseUri)
        {
            this.BaseUri = baseUri;
        }

        #region Delete方式
        public string Delete(string data, string uri)
        {
            return CommonHttpRequest(data, uri, "DELETE");
        }

        public string Delete(string serviceUrl)
        {
            //Web访问对象64
           // string serviceUrl = string.Format("{0}/{1}", this.BaseUri, uri);
            HttpWebRequest myRequest = (HttpWebRequest)WebRequest.Create(serviceUrl);
            myRequest.Method = "DELETE";
            // 获得接口返回值68
            HttpWebResponse myResponse = (HttpWebResponse)myRequest.GetResponse();
            StreamReader reader = new StreamReader(myResponse.GetResponseStream(), Encoding.UTF8);
            //string ReturnXml = HttpUtility.UrlDecode(reader.ReadToEnd());
            string ReturnXml = reader.ReadToEnd();
            reader.Close();
            myResponse.Close();
            return ReturnXml;
        }
        #endregion

        #region Put方式
        public string Put(string data, string uri)
        {
            return CommonHttpRequest(data, uri, "PUT");
        }
        #endregion

        #region POST方式实现

        public string Post(string data, string uri)
        {
            return CommonHttpRequest(data, uri, "POST");
        }

        public string CommonHttpRequest(string data, string serviceUrl, string type)
        {
            //Web访问对象，构造请求的url地址
           // string serviceUrl = string.Format("{0}/{1}", this.BaseUri, uri);

            //构造http请求的对象
            HttpWebRequest myRequest = (HttpWebRequest)WebRequest.Create(serviceUrl);
            //转成网络流
            byte[] buf = System.Text.Encoding.GetEncoding("UTF-8").GetBytes(data);
            //设置
            myRequest.Method = type;
            myRequest.ContentLength = buf.Length;
            myRequest.ContentType = "application/json";
            myRequest.MaximumAutomaticRedirections = 1;
            myRequest.AllowAutoRedirect = true;
            // 发送请求
            Stream newStream = myRequest.GetRequestStream();
            newStream.Write(buf, 0, buf.Length);
            newStream.Close();
            // 获得接口返回值
            HttpWebResponse myResponse = (HttpWebResponse)myRequest.GetResponse();
            StreamReader reader = new StreamReader(myResponse.GetResponseStream(), Encoding.UTF8);
            string ReturnXml = reader.ReadToEnd();
            reader.Close();
            myResponse.Close();
            return ReturnXml;
        }

        /// <summary>
        /// post调用网页是否验证成功
        /// </summary>
        /// <param name="RequestPara"></param>
        /// <param name="Url"></param>
        /// <returns></returns>
        public static string GetFormWebServiceByPOST(string RequestPara, string Url)
        {
            WebRequest hr = HttpWebRequest.Create(Url);

            byte[] buf = System.Text.Encoding.GetEncoding("utf-8").GetBytes(RequestPara);
            hr.ContentType = "application/x-www-form-urlencoded";
            hr.ContentLength = buf.Length;
            hr.Method = "POST";

            System.IO.Stream RequestStream = hr.GetRequestStream();
            RequestStream.Write(buf, 0, buf.Length);
            RequestStream.Close();

            System.Net.WebResponse response = hr.GetResponse();
            StreamReader reader = new StreamReader(response.GetResponseStream(), Encoding.GetEncoding("utf-8"));
            string ReturnVal = reader.ReadToEnd();
            reader.Close();
            response.Close();

            return ReturnVal;
        }
        #endregion

        #region GET方式实现  已认证成功
        public string Get(string serviceUrl)
        {
            //Web访问对象64
           // string serviceUrl = string.Format("{0}/{1}", this.BaseUri, uri);

            //构造一个Web请求的对象
            HttpWebRequest myRequest = (HttpWebRequest)WebRequest.Create(serviceUrl);
            // 获得接口返回值68
            //获取web请求的响应的内容
            HttpWebResponse myResponse = (HttpWebResponse)myRequest.GetResponse();

            //通过响应流构造一个StreamReader
            StreamReader reader = new StreamReader(myResponse.GetResponseStream(), Encoding.UTF8);
            //string ReturnXml = HttpUtility.UrlDecode(reader.ReadToEnd());
            string ReturnXml = reader.ReadToEnd();
            reader.Close();
            myResponse.Close();
            return ReturnXml;
        }

        /// <summary>
        /// 通过GET方式去获取信息。（post调用网页是否验证成功【已成功调用】）
        /// </summary>
        /// <param name="type"></param>
        /// <param name="_params"></param>
        /// <returns></returns>
        public string GetFormWebServiceByGet(string _url)
        {
            WebRequest _request = WebRequest.Create(_url);
            _request.Method = "GET";
            WebResponse _response = _request.GetResponse();
            StreamReader _reader = new StreamReader(_response.GetResponseStream(), Encoding.UTF8);
            string _str = _reader.ReadToEnd();
            _reader.Close();
            _response.Close();
            return _str;
        }
        #endregion

    }

    
}

输出结果：

任意点击数据是变幻的：

重要提示：看后台代码的page，limit，前台显示不出来的，需要调：