這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)layui數(shù)據(jù)表格重載實現(xiàn)往后臺傳參,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
創(chuàng)新互聯(lián)專注于雙湖網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供雙湖營銷型網(wǎng)站建設(shè),雙湖網(wǎng)站制作、雙湖網(wǎng)頁設(shè)計、雙湖網(wǎng)站官網(wǎng)定制、小程序定制開發(fā)服務(wù),打造雙湖網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供雙湖網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
1、網(wǎng)上的代碼:
<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這個關(guān)鍵字傳到后端,接下來就是自己處理查詢關(guān)鍵字業(yè)務(wù)了。
到目前為止,搜索也有了,分頁也有了,對了,分頁會自動傳到后端page,limit2個值到后臺,相當于(pageindex,pagesize)
2、實踐,
(1)html頁面及javascript代碼如下:
<!--index.html內(nèi)容如下-->
{% 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" >擴展功能</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">
<h3 class="layui-colla-title">擴展功能</h3>
<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">
<h3 class="layui-colla-title">日志</h3>
<div class="layui-colla-content layui-show"><textarea placeholder="" id="log" class="layui-textarea" name="desc"></textarea></div>
</div>
<div class="layui-colla-item">
<h3 class="layui-colla-title">附加信息</h3>
<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: '短信內(nèi)容', sort: true}
,{field:'create_time', title: '發(fā)送時間',width:160}
]]
,id: 'testReload'
,page: true
,height: 500
});
var $ = layui.$, active = {
reload: function(){
var demoReload = $('#phone');
$('.env_message').html('當前操作環(huán)境:'+ parent.window.env_tools);
//執(zhí)行重載
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數(shù)據(jù)表格重載實現(xiàn)往后臺傳參了,如果剛好有類似的疑惑,不妨參照上述分析進行理解。如果想知道更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
新聞標題:layui數(shù)據(jù)表格重載實現(xiàn)往后臺傳參
本文鏈接:http://chinadenli.net/article44/ggjghe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、企業(yè)建站、電子商務(wù)、品牌網(wǎng)站設(shè)計、營銷型網(wǎng)站建設(shè)、網(wǎng)站設(shè)計公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)