文章仅作为个人备忘，未精细整理

方法及配置参考处layui网站及相关网络资源，实现了通过Layui表格快速实现请求服务器端分页数据。

前端代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><script src="../../lib/jquery.min.js"></script><link rel="stylesheet" href="../../lib/layui/css/layui.css"><script src="../../lib/layui/layui.js"></script><script>var url = "";layui.use(["table"], function() {var layTable = layui.table;var cols = [//     {//     checkbox: true// },....];layTable.render({elem: "#resultTable",height: "full-300",cols: [cols],url: url,page: true,limit: 20,type: "GET",// contentType: "application/json",request: {pageName: 'currPageFromOne',limitName: 'pageLimit' //每页数据量的参数名，默认：limit},where: {// pageLimit: 10,// currPageFromOne: 1,keyword: ""},parseData: function(res) { //res 即为原始返回的数据return {"code": 0, //解析接口状态"msg": res.message || "数据获取完成", //解析提示文本"count": res.result.Table1[0]["totalRow"], //解析数据长度"data": res.result.Table //解析数据列表};},done: function(res, curr, count) {//如果是异步请求数据方式，res即为你接口返回的信息。//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度console.log("res", res);//得到当前页码console.log("curr", curr);//得到数据总量console.log("count", count);}})});</script>
</head><body><div id="root"><div id="queryDiv"></div><div id="resultDiv"><table id="resultTable" lay-filter="resultTable" style="width: 80%"></table></div></div>
</body></html>

后台c#代码

[WebMethod]
public void QueryBookForManage(string pageLimit, string currPageFromOne, //string orderField,string keyword){IDBHelper dbhelper = DBHelper.GetDBHelper();string errMsg = "";DataSet ds = null;string sql = "";try{int minID = int.Parse(pageLimit) * (int.Parse(currPageFromOne) - 1);int maxID = minID + int.Parse(pageLimit);string baseSql = " select *,ROW_NUMBER() over (order by Time desc, Name asc) rn from View_B ";string whereSql = " where Name like '%" + keyword + "%' ";sql = " select * from (" + baseSql + whereSql + ") s where rn>" + minID + " and rn<=" + maxID;sql += "; select max(rn) totalRow from  (" + baseSql + whereSql + ") s; ";ds = dbhelper.RunSqlQueryJust(sql, out errMsg);if (ds == null){// 自定义的response方法JsonReturnHandler("{\"success\":0,\"message\":\"" + errMsg + "\"}");return;}string r = JsonConvert.SerializeObject(ds, Formatting.Indented);JsonReturnHandler("{\"success\":1,\"result\":" + r + "}");return;}catch (Exception e){JsonReturnHandler("{\"success\":0,\"message\":\"" + e.ToString() + "\"}");return;}}

服务器端返回数据格式

Layui表格异步请求服务器端分页数据相关推荐

众筹网站项目第四天之异步请求的分页查询和模糊条件查询(2)
打开原教程视频注:本人是渣渣,有错请谅解. 异步请求的分页查询和模糊条件查询同步请求和异步请求的区别在实现登录功能时已经介绍过了,下图便是实现异步请求分页查询的时序图. 可以看出我们首先进行用户列 ...
layui表格获取不到多层数据的解决方案
layui表格获取不到多层数据的解决方案参考文章: (1)layui表格获取不到多层数据的解决方案 (2)https://www.cnblogs.com/yinhuiyang/p/9298559.h ...
微信小程序 index.js获取app.js异步请求的动态数据
对于 "index.js不能获取app.js异步请求的动态数据" 这个问题,本人也是郁闷了好几分钟. 解决方法是:getApp().wxFunction().then(res =& ...
JS Ajax异步请求发送列表数据后面多了[]
还在苦逼的写代码,这里就不详细了,直接抛出问题: 如图所示: 前端ajax请求向后端发送数据的时候,给key添加了[]出现很多找不到原因, 后面在说解决方法: 暂时先这样记录一下,下次方便查找,好了 ...
asp.net,Ajax发送异步请求后台修改数据
<a class="OverInfo" href="javascript:;" data-id="<%=dr["OrderNo& ...
layui表格更改一列数据_【WEB前端开辟】layui表格数据变动的一种处理方式
表格数据更改,平常包括几个内容:新增.修正.删除.挪动,开辟中常常会面对的一个题目就是更改以后怎样将数据同步到节点上,一向以来个人的提议照样应用表格重载,不管是url情势的照样data情势的实际都是须 ...
Layui表格数据值相加（一）
开发工具与关键技术: Visual Studio done回调作者:黎凤焕撰写时间:2019年 7 月 19 日 Layui表格列数据(金额数据列的数据自动相加)相加,将总金额赋值给input框, ...
vuejs之v-if-ajax异步请求数据遇到的坑
场景: params是异步请求获得的数据是一个对象,对象中又有chefHealthInfos数组渲染时候会报错: 分析: 这是因为可以把v-if看成渲染了两次,两次结果params分别为{},{ch ...
Echarts 异步请求不能加载本地JSON数据解决方案，以及Http-Server安装与使用
文章目录一.前言二.分析&解决方案三.Http-Server简介&安装方法四.启动http本地服务方法五.附:Http-Server可选配置一.前言最近学习eharts制 ...

Layui表格异步请求服务器端分页数据

文章仅作为个人备忘，未精细整理

前端代码

后台c#代码

服务器端返回数据格式

Layui表格异步请求服务器端分页数据相关推荐

最新文章

热门文章