Layui表格异步请求服务器端分页数据
生活随笔
收集整理的這篇文章主要介紹了
Layui表格异步请求服务器端分页数据
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
文章僅作為個人備忘，未精細整理
方法及配置參考處layui網(wǎng)站及相關(guān)網(wǎng)絡(luò)資源，實現(xiàn)了通過Layui表格快速實現(xiàn)請求服務(wù)器端分頁數(shù)據(jù)。
前端代碼
<!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' //每頁數(shù)據(jù)量的參數(shù)名，默認(rèn)：limit},where: {// pageLimit: 10,// currPageFromOne: 1,keyword: ""},parseData: function(res) { //res 即為原始返回的數(shù)據(jù)return {"code": 0, //解析接口狀態(tài)"msg": res.message || "數(shù)據(jù)獲取完成", //解析提示文本"count": res.result.Table1[0]["totalRow"], //解析數(shù)據(jù)長度"data": res.result.Table //解析數(shù)據(jù)列表};},done: function(res, curr, count) {//如果是異步請求數(shù)據(jù)方式，res即為你接口返回的信息。//如果是直接賦值的方式，res即為：{data: [], count: 99} data為當(dāng)前頁數(shù)據(jù)、count為數(shù)據(jù)總長度console.log("res", res);//得到當(dāng)前頁碼console.log("curr", curr);//得到數(shù)據(jù)總量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;}}服務(wù)器端返回數(shù)據(jù)格式
總結(jié)
以上是生活随笔為你收集整理的Layui表格异步请求服务器端分页数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue实现轮播图完整版，锁定图片元素纵横
- 下一篇： React学习（一）：简单介绍入门