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 相关文章推荐
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
Oct 05 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
原生js代码能实现call和bind吗
Jul 31 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
ionCube 一款类似zend的PHP加密/解密工具
2010/07/25 PHP
那些年一起学习的PHP(二)
2012/03/21 PHP
php设计模式之单例模式使用示例
2014/01/20 PHP
php中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
splice slice区别
2006/10/09 Javascript
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
JQuery 弹出框定位实现方法
2010/12/02 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
图解js图片轮播效果
2015/12/20 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
python字典与json转换的方法总结
2020/12/28 Python
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
旅游管理专业个人求职信范文
2013/12/24 职场文书
感谢信模板大全
2015/01/23 职场文书
企业催款函范本
2015/06/24 职场文书
pytorch实现ResNet结构的实例代码
2021/05/17 Python
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL
Mysql开启外网访问
2022/05/15 MySQL
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript