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";// 获得接口返回值68HttpWebResponse 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();//通过响应流构造一个StreamReaderStreamReader 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，前台显示不出来的，需要调：

layui分页page=true容易踩的坑相关推荐

elementUI 分页组件的使用 - 踩坑篇
elementUI 分页组件的使用.API调用.获取服务端数据.并初始化渲染页面:(踩坑一则) 因每个公司 / 每个项目 / 客户需求 / 都各有差异,所以本例只是demo说解,并非举一反三或万能分页 ...
layui分页数据表格渲染
最近需要对后台的数据进行分页渲染并且需要进行表头动态渲染,因此和小伙伴一起学习了layui的数据表格渲染,然后进行了改进,成功之后记录了下来先说前端HTML和js代码 <script src= ...
Spring Boot 从1.0 升级到 2.0 所踩的坑
先给大家晒一下云收藏的几个数据,作为一个 Spring Boot 的开源项目(https://github.com/cloudfavorites/favorites-web)目前在 Github 上面 ...
springMVC+hibernate + layui分页
demo去官网下载layui 引入 js css<%@ page language="java" contentType="text/html; charset=U ...
Hexo+next主题配置踩的坑
Hexo+next主题配置踩的坑下载安装完next主题后才发现一堆的坑.由于next的版本不同.所以有的配置文件和网上的教程不大一样.自己踩了N多坑,于是打算记录一下.于是自己试了好几天才差不多配置 ...
layui分页和模板引擎
模板引擎 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
mysql实现layui分页_LayUI
1. 导入pagehelper 编辑 pom.xml,添加 com.github.pagehelper pagehelper ${pagehelper.version} 2. 配置pagehelper ...
layui分页页码消失
layui分页传值到后台,下方分页栏消失通过layui的分页完成后,想要再完成搜索的分页,但是在向后台传递页码时附带搜索框内容,会发现分页下方页面消失了.后来才发现是搜索框内的值获取问题. 后台代码 ...
layui分页功能实现、管理员模块
1,layui table模块自带的分页功能实现前提:js中引入table模块并加载,用table.render()渲染表格 1.1设置table.render()中的page字段为true,开启分 ...

layui分页page=true容易踩的坑

layui分页page=true容易踩的坑相关推荐

最新文章

热门文章