layui数据表格重载实现往后台传参


Posted in Javascript onNovember 15, 2019

1、网上的代码:

<div class="demoTable"> 
搜索商户: <div class="layui-inline"> 
<input class="layui-input" name="keyword" id="demoReload" autocomplete="off"> 
</div> 
<button class="layui-btn" data-type="reload">搜索</button></div> 
 
在js加入初始化代码和定义加载方法 
layui.use('table', function(){ 
var table = layui.table; 
 
//方法级渲染 
table.render({ 
elem: '#LAY_table_user' 
,url: 'UVServlet' 
,cols: [[ 
{checkbox: true, fixed: true} 
,{field:'id', title: 'ID', width:80, sort: true, fixed: true} 
,{field:'aid', title: '商户', width:80, sort: true} 
,{field:'uv', title: '访问量', width:80, sort: true,edit:true} 
,{field:'date', title: '日期', width:180} 
,{field:'datatype', title: '日期类型', width:100} 
 
]] 
,id: 'testReload' 
,page: true 
,height: 600 
}); 
 
var $ = layui.$, active = { 
reload: function(){ 
var demoReload = $('#demoReload'); 
 
table.reload('testReload', { 
where: { 
keyword: demoReload.val() 
} 
}); 
} 
}; 
)};

绑定click点击事件

$('.demoTable .layui-btn').on('click', function(){ var type = $(this).data('type'); //注意顶一个括号中的格式,class用.id用#,中间有一个空格
active[type] ? active[type].call(this) : ''; 
});

此时点击查询按钮,会将keyword这个关键字传到后端,接下来就是自己处理查询关键字业务了。

到目前为止,搜索也有了,分页也有了,对了,分页会自动传到后端page,limit2个值到后台,相当于(pageindex,pagesize)

2、实践,

(1)html页面及javascript代码如下:

<!--index.html内容如下-->
{% extends 'common.html'%}
  {% block content %}
    <div class="layui-row">
				<form class="layui-form layui-col-md12 we-search" id="form_gen_data">
					<div class="layui-inline">
            <label class="layui-form-label">手机号</label>
						<input class="layui-input" placeholder="手机号" name="phone" id="phone">
					</div>
 
          <div class="layui-inline">
            <label class="layui-form-label">身份证</label>
						<input class="layui-input" placeholder="身份证" name="idno" id="idno">
					</div>
 
          <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
						<input class="layui-input" placeholder="姓名" name="name" id="name">
					</div>
 
          <div class="layui-inline">
            <label class="layui-form-label">crfuid</label>
						<input class="layui-input" placeholder="crfuid" name="crfuid" id="crfuid">
					</div>
 
				</form>
			</div>
 
			<div class="weadmin-block">
 
				<button class="layui-btn" id="query_extra" style="display:none;">扩展功能</button>
				<button class="layui-btn" id="query_thumb">开始查询</button>
				<button class="layui-btn" id="query_limit">额度查询</button>
				<button class="layui-btn" id="query_member">会员查询</button>
				<button class="layui-btn" id="query_account">账户查询</button>
 
				<button class="layui-btn" id="query_sms" οnclick="return false;" data-type="reload">短信验证码查询</button>
				<div class="layui-collapse" lay-accordion>
 
				 <div class="layui-colla-item">
					<h2 class="layui-colla-title">扩展功能</h2>
					<div class="layui-colla-content">
						{% for business in common_business %}
						<button class="layui-btn layui-btn-danger common_business" id="{{business.business_code}}" data-type="{{business.business_code}}" data-extra="{{business.business_is_extra}}">{{business.business_name}}</button>
						{% endfor %}
					</div>
				 </div>
				</div>
 
 
			</div>
			<div class="layui-collapse">
			 	<div class="layui-colla-item">
					<h2 class="layui-colla-title">日志</h2>
					<div class="layui-colla-content layui-show"><textarea placeholder="" id="log" class="layui-textarea" name="desc"></textarea></div>
 
 
				</div>
 
				<div class="layui-colla-item">
					<h2 class="layui-colla-title">附加信息</h2>
					<div class="layui-colla-content layui-show" id="extra_info">
 
					</div>
				</div>
			</div>
 
 
			<table class="layui-hide" id="table_message" lay-filter="user"></table>
 
      <script type="text/javascript" src="/static/lib/layui/layui.js" charset="utf-8"></script>
 
			<script>
      layui.use('table', function(){
        var table = layui.table;
 
        //方法级渲染
        table.render({
          elem: '#table_message'
          ,url: '/sms/message'
          ,method:'post'
          ,where: {
                phone: '',
                env_tools:parent.window.env_tools
              }
          ,cellMinWidth: 100
          ,cols: [[
            {checkbox: true, fixed: true}
            ,{field:'id', title: 'ID', sort: true,width:120, fixed: true}
            ,{field:'phone', title: '手机号',width:120}
            ,{field:'content', title: '短信内容', sort: true}
            ,{field:'create_time', title: '发送时间',width:160}
          ]]
          ,id: 'testReload'
          ,page: true
          ,height: 500
        });
 
        var $ = layui.$, active = {
          reload: function(){
            var demoReload = $('#phone');
            $('.env_message').html('当前操作环境:'+ parent.window.env_tools);
            //执行重载
            table.reload('testReload', {
              page: {
                curr: 1 //重新从第 1 页开始
              }
              ,where: {
                phone: demoReload.val(),
                env_tools:parent.window.env_tools
              }
            });
          }
        };
 
        $('.weadmin-block #query_sms').on('click',
        function(){
          var type = $(this).data('type');
          active[type] ? active[type].call(this) : '';
        });
      });
    </script>
 
  {% endblock %}

(2)后台代码如下:

@toolsbp.route('/')
@toolsbp.route('/index',methods=['GET','POST'])
def index():
  
  if request.method=='POST':
    data={}
    data['data']=''
    data['code']=0
    data['msg']='查询成功'
    env=request.form.get('env_tools')
 
    if env is None:
      return json.dumps(data)
    phone=request.form.get('phone')
    where=''
    if phone:
      where="where phone like '%(phone)s'"%{'phone':'%'+phone+'%'}
    dbinfo=env_config.ENV_LIST.get(env.upper()).get('sms_platform')
    dbtool=MysqlPool.MysqlPool(dbinfo.get('db_name'))
    result=dbtool.getAll("select * from %(table_name)s.sms_send_record %(where)s order by create_time desc limit %(page)d,%(pagesize)d;"%{'where':where,'table_name':dbinfo.get('table_name'),'page':int(request.form.get('page'))-1,'pagesize':int(request.form.get('limit'))})
    data['data']=result
    if result:
      data['count']=len(result)
    else:
      data['count']=0
    return json.dumps(data,cls=MysqlPool.DateEncoder)
  return render_template('tools/index.html')

(3)页面功能如下:

layui数据表格重载实现往后台传参

以上这篇layui数据表格重载实现往后台传参就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
javascript 设置文本框中焦点的位置
Nov 20 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 Javascript
JS实现贪吃蛇游戏
Nov 15 #Javascript
Layui表格监听行单双击事件讲解
Nov 14 #Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 #Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 #Javascript
layui写后台表格思路和赋值用法详解
Nov 14 #Javascript
Layui实现主窗口和Iframe层参数传递
Nov 14 #Javascript
layui 弹出层值回传解决方式
Nov 14 #Javascript
You might like
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
CodeIgniter CLI模式简介
2014/06/17 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
利用vue重构有赞商城的思路以及总结整理
2019/02/21 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
django云端留言板实例详解
2019/07/22 Python
python mysql断开重连的实现方法
2019/07/26 Python
详解Python IO口多路复用
2020/06/17 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
会计学个人自荐信模板
2013/12/13 职场文书
打架检讨书100字
2014/01/08 职场文书
实验室的标语
2014/06/20 职场文书
2014年仓库工作总结
2014/11/20 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
Python 线程池模块之多线程操作代码
2021/05/20 Python