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 相关文章推荐
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 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
聊天室php&amp;mysql(五)
2006/10/09 PHP
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
javascript history对象详解
2017/02/09 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
使用Python设计一个代码统计工具
2018/04/04 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
is_file和file_exists效率比较
2021/03/14 PHP
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
保时捷设计:Porsche Design
2019/03/30 全球购物
经贸日语毕业生自荐信
2013/11/03 职场文书
社区七一党员活动方案
2014/01/25 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
十佳家长事迹材料
2014/08/26 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
留学推荐信中文范文
2015/03/26 职场文书
考研英语辞职信
2015/05/13 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
工作计划范文之财务管理
2019/08/09 职场文书
Python可视化学习之seaborn调色盘
2022/02/24 Python
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android