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

layui版本:2.5.4

起因:

今天对旧框架进行版本升级改造,找遍整个layui开发文档以及其他解决方案,竟然没有table相关的渲染前回调执行前回调函数;通过阅读开发文档,发现layui默认起始页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

你的提问是小编创作灵感的来源!
































發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章