layui table数据表格渲染前回调（重写layui的ajax执行前回调）

末蓝、 2024-04-18 16:53 65阅读 0赞

**layui版本**：2.5.4

## 起因： ##

今天对旧框架进行版本升级改造，找遍整个[layui开发文档][layui]以及其他解决方案，竟然没有`table`相关的`渲染前回调`、`执行前回调`函数；通过阅读开发文档，发现[layui默认起始页][layui 1]为`page=1&limit=10`，而后端使用mysql查询时用到的分页语句需要的是`limit 0,10`，结果就导致了前后端分页起始页不匹配，为了在开发过程中避免过多的浪费时间在这些小事情上，于是做了统一处理，在layui的ajax请求执行前做url处理，方案如下：

## 方案： ##

将代码拷贝到`<script> </script>`标签内，注意是放在`layui.js`引入文件后面（可纳入封装好的通用工具文件中去），代码：

<script src="js/layui-v2.5.4/layui.js" charset="utf-8"></script>
    <script type="text/javascript"> //重写layui的Ajax请求 if (!(typeof layui == "undefined")) { layui.use(['layer', 'jquery'], function () { var layer = layui.layer, $ = layui.jquery; //首先备份下jquery的ajax方法 var _ajax = $.ajax; //重写jquery的ajax方法 var flashLoad; $.ajax = function (opt) { //备份opt中error和success方法 var fn = { error: function (XMLHttpRequest, textStatus, errorThrown) { }, success: function (data, textStatus) { } } if (opt.error) { fn.error = opt.error; } if (opt.success) { fn.success = opt.success; } //扩展增强处理 var _opt = $.extend(opt, { error: function (XMLHttpRequest, textStatus, errorThrown) { //错误方法增强处理 if ('TIMEOUT' == XMLHttpRequest.getResponseHeader('SESSIONS_TATUS')) { parent.window.parent.window.location.href = XMLHttpRequest.getResponseHeader('content_path'); } fn.error(XMLHttpRequest, textStatus, errorThrown); }, success: function (data, textStatus) { //成功回调方法增强处理 if (-1 == data.status || '-1' == data.status || 0 == data.status || '0' == data.status) { return layer.msg(data.tip); } fn.success(data, textStatus); }, beforeSend: function (XHR, response) { /** * 修复layui分页bug，pageNum属性-1适应后端查询 */ var urlParams = util.url.getUrlAllParams(response.url); if (urlParams && urlParams.pageNum) { var urlIndex = response.url.substring(0, response.url.indexOf('?') + 1); urlParams.pageNum = urlParams.pageNum-1; for (var item in urlParams) { urlIndex += (item + '=' + urlParams[item]) + '&'; } response.url = urlIndex.substring(0, urlIndex.length-1); } //提交前回调方法 flashLoad = layer.load(0, { shade: [0.7, '#393D49']}, { shadeClose: true}); //0代表加载的风格，支持0-2 }, complete: function (XHR, TS) { //请求完成后回调函数 (请求成功或失败之后均调用)。 layer.close(flashLoad); } }); return _ajax(_opt); } }); }; </script>

--------------------

## 结语： ##

如果这个方案对您有用，请在右上方`点个赞`；如果有任何疑问，可以`留言`，小编会在24小时内及时回复！如果你想汲取小编更多的精华，请`关注`小编！\`

注：以上内容仅提供参考和交流，请勿用于商业用途，如有侵权联系本人删除！

--------------------

## 持续更新中… ##

如有对思路不清晰或有更好的解决思路，欢迎与本人交流，QQ群：273557553  
你遇到的问题是小编创作灵感的来源！

--------------------

[layui]: https://www.layui.com/doc/modules/table.html
[layui 1]: https://www.layui.com/doc/modules/table.html#async

发表评论取消回复

表情：

评论列表（有 0 条评论，65人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui table数据表格渲染前回调（重写layui的ajax执行前回调）

*layui版本**：2.5.4 起因：今天对旧框架进行版本升级改造，找遍整个[layui开发文档][layui]以及其他解决方案，竟然没有`table`相关的...

末蓝、/ 2024年04月18日 16:53/ 0 赞/ 66 阅读

相关 layui 方法渲染表格数据

layui.use('table', function () { const table = layui.table; //第一个实例

爱被打了一巴掌/ 2024年03月31日 17:17/ 0 赞/ 132 阅读

相关 AJAX手写JQuery封装回调函数------AJAX

> <!DOCTYPE html> > <html lang="en"> > <head> > <meta charset="UTF-8

- 日理万妓/ 2024年02月18日 11:33/ 0 赞/ 93 阅读

相关 layui数据表格复选框回显

<table> <tbody> <tr> <td>LAY_CHECKED</td> <td>Boolean</td> <td>是否全选状态（默

￡神魔★判官ぃ/ 2023年06月28日 09:55/ 0 赞/ 12 阅读

相关 layui ajax请求的结果进行table渲染

layui表格渲染一般都是直接 table.render，由于页面每个几秒要重新请求后台，就去重载，这样页面就感觉一直闪【未找到好的解决方法，如有，望告知】，体验不好，所以就用

柔情只为你懂/ 2023年06月15日 11:17/ 0 赞/ 14 阅读

相关 layUI弹出框增加回调事件

layer.open({ type:2, //弹出层现实的样式 //shade:false, //不显示背景阴影，去掉这个属性则显

红太狼/ 2023年06月08日 04:43/ 0 赞/ 8 阅读

相关 layui给table表格中加入数据渲染表格

//id为 tableIns的表格数据为rows tableIns.reload({ data: }); 或者

古城微笑少年丶/ 2022年05月12日 11:50/ 0 赞/ 364 阅读

相关 layui之ajax--回调函数

问题：一个简单的AJAX提交表单操作，经常发生后台数据保存好了，前端layer弹出层没有关闭，父页面没有刷新，定位发现是回调函数没有执行！！！用Google Chrome浏览器

墨蓝/ 2022年05月11日 00:54/ 0 赞/ 343 阅读

相关 Layui表格渲染

开发工具与关键技术： Visual Studio 2015 – Layui表格渲染作者：廖亚星撰写时间：2019年5 月15 日下面我用Layui插件来渲染代码

缺乏、安全感/ 2022年01月31日 05:49/ 0 赞/ 569 阅读

相关回调与回调函数

回调与回调函数回调回调函数回调回调指的是某函数在执行的时候，由于某些原因，该函数被迫中止执行，交出当前线程的使用权，当前线程转而执行其它函

悠悠/ 2021年09月25日 04:26/ 0 赞/ 565 阅读