Layui实现带查询条件的分页


Posted in Javascript onJuly 27, 2019

本文实例为大家分享了Layui实现带查询条件的分页,供大家参考,具体内容如下

这个前端UI框架是真的让人又爱又恨呐!想了很久的方案才行的通

这是全部源码:

{include file="../../../application/admin/view/public/head" /}
 
<div class="page-container p10">
 
 <form class="layui-form " method="post" id="pageListForm">
 <div class="layui-input-inline w150">
  <div class="layui-btn-group">
  <a data-full="1" data-href="{:url('addBanner')}" class="layui-btn layui-btn-primary j-iframe"><i class="layui-icon"></i>添加广告</a>
  </div>
 
 </div>
 
 <div class="layui-input-inline w150">
  <select name="vt_id" class="vt_id">
  <option value="">视频类型</option>
  {foreach name='subject' item='v'}
  <option value="{$v['vt_id']}" >{$v['vt_name']}</option>
  {/foreach}
  </select>
 </div>
 
 
 <div class="layui-input-inline w150">
  <select name="b_targetType" class="b_targetType">
  <option value="">是否跳出</option>
  <option value="1">是</option>
  <option value="2">否</option>
  </select>
 </div>
 <div class="layui-input-inline">
  <input type="text" autocomplete="off" placeholder="请输入搜索条件" id="content" class="layui-input" name="b_title" value="">
 </div>
 
 <a class="layui-btn mgl-20 .j-kaka" id="query"> 查询</a>
 
 
 <table class="layui-table" lay-size="sm">
 <thead>
  <tr >
  <th width="25">ID</th>
  <th width="50">分类</th>
  <th width="100">对应视频</th>
  <th width="40">缩略图</th>
  <th width="80">点击url</th>
  <th width="30">排序</th>
  <th width="100">展示类型</th>
  <th width="100">是否跳出2是1否</th>
  <th width="100">标题</th>
  <th width="100">内容页模版</th>
  <th width="100">链接列表</th>
  <th width="130">操作</th>
  </tr>
 </thead>
  <tbody id="tab_list">
 
  </tbody>
 </table>
 </form>
</div>
 
<div id="pages" class="center"></div>
 
{include file="../../../application/admin/view/public/foot" /}
 
<script type="text/javascript">
 
 window.οnlοad= function () {
 loadData() //请求数据
 getPage() //分页操作
 }
 var page=1; //设置首页页码
 var limit=3; //设置一页显示的条数
 var total; //总条数
 function loadData(){
 $.ajax({
  type:"post",
  url:"{url(Banner/index)}",//对应controller的URL
  async:false,
  dataType: 'json',
  data:{
  "page_index":page,
  "page_size":limit,
  },
  success:function(ret){
  total=ret.total_count;
 
  var data1=ret.data;
  var html= '';
  for(var i=0;i<data1.length;i++){
   html+='<tr>';
   html+='<td>'+ data1[i].b_id +'</td>';
   html+='<td>'+ data1[i].b_id +'</td>';
   html+='<td>'+ data1[i]['banner_vs_video_name']['vi_title'] +'</td>';
   html+='<td>'+ data1[i]['b_thumbnailUrl'] +'</td>';
   html+='<td>'+ data1[i]['b_linkUrl'] +'</td>';
   html+='<td>'+ data1[i]['b_sort'] +'</td>';
   html+='<td>'+ data1[i]['b_showType'] +'</td>';
   html+='<td>'+ data1[i]['b_targetType'] +'</td>';
   html+='<td>'+ data1[i]['b_title'] +'</td>';
   html+='<td>'+ data1[i]['b_slaveTitle'] +'</td>';
   html+='<td>'+ data1[i]['b_linkUrlList']+'</td>';
   html+='<td>';
   html+='<a class="layui-badge-rim j-iframe" data-full="1" data-href='+ROOT_PATH+'/index.php/admin/banner/editBanner?b_id='+data1[i]['b_id']+' href="javascript:;" title="编辑">编辑</a>';
   html+='<a class="layui-badge-rim j-tr-del del" data-href='+ROOT_PATH+'/index.php/admin/banner/delBanner?b_id='+data1[i]['b_id']+' href="javascript:;" title="删除">删除</a>';
   html+='</td>';
 
   html+='</tr>';
  }
  $("#tab_list").html(html);
  }
 });
 }
 
 
 // 查询
 $('#query').click(function(){
 var content = $('#content').val();
 var vt_id = $('.vt_id').val();
 var b_targetType = $('.b_targetType').val();
 
 if(!content && !vt_id && !b_targetType){
  layer.msg('查询条件不能为空');
  return false
 }
 
 $.ajax({
  type:"post",
  url:"{url(Banner/index)}",//对应controller的URL
  async:false,
  dataType: 'json',
  data:{
  "page_index":page,
  "page_size":limit,
  "b_title":content,
  "vt_id":vt_id,
  "b_targetType":b_targetType
  },
  success:function(ret){
  total=ret.total_count;
  getPage();
 
  var data1=ret.data;
  var html= '';
  for(var i=0;i<data1.length;i++){
   html+='<tr>';
   html+='<td>'+ data1[i].b_id +'</td>';
   html+='<td>'+ data1[i].b_id +'</td>';
   html+='<td>'+ data1[i]['banner_vs_video_name']['vi_title'] +'</td>';
   html+='<td>'+ data1[i]['b_thumbnailUrl'] +'</td>';
   html+='<td>'+ data1[i]['b_linkUrl'] +'</td>';
   html+='<td>'+ data1[i]['b_sort'] +'</td>';
   html+='<td>'+ data1[i]['b_showType'] +'</td>';
   html+='<td>'+ data1[i]['b_targetType'] +'</td>';
   html+='<td>'+ data1[i]['b_title'] +'</td>';
   html+='<td>'+ data1[i]['b_slaveTitle'] +'</td>';
   html+='<td>'+ data1[i]['b_linkUrlList']+'</td>';
   html+='<td>';
   html+='<a class="layui-badge-rim j-iframe" data-full="1" data-href='+ROOT_PATH+'/index.php/admin/banner/editBanner?b_id='+data1[i]['b_id']+' href="javascript:;" title="编辑">编辑</a>';
   html+='<a class="layui-badge-rim j-tr-del del" data-href='+ROOT_PATH+'/index.php/admin/banner/delBanner?b_id='+data1[i]['b_id']+' href="javascript:;" title="删除">删除</a>';
   html+='</td>';
 
   html+='</tr>';
  }
  $("#tab_list").html(html);
  }
 });
 });
 
 
 function getPage(){
 layui.use('laypage', function(){
  var laypage = layui.laypage
  , layer = layui.layer;
  laypage.render({
  elem: 'pages'
  ,count: total //数据总数,从服务端得到
  ,limit:limit
  ,jump: function(obj, first){
   page=obj.curr; //改变当前页码
   limit=obj.limit;
   if(!first){
   loadData()
   }
  }
  });
 });
 }
 
 
 
 
 // 点击删除
 $(document).on('click','.del',function(){
 var that = $(this),
  href = !that.attr('data-href') ? that.attr('href') : that.attr('data-href');
 layer.confirm('删除之后无法恢复,您确定要删除吗?', {title:false, closeBtn:0}, function(index){
  if (!href) {
  layer.msg('请设置data-href参数');
  return false;
  }
  $.get(href, function(res){
  layer.msg(res.msg);
  if (res.code == 1) {
   that.parents('tr').remove();
  }
  });
  layer.close(index);
 });
 return false;
 })
 
 
 /**
 * 更改数据顺序
 */
 layui.use('laypage', function(){
 var laypage = layui.laypage
  , layer = layui.layer,
  $ = layui.$;
 
 $(document).on('blur','.sort',function(){
  var that = $(this),
  b_sort = that.val();
  var b_id = that.attr('b_id');
 
  $.post("{:url('banner/editSort')}",{b_sort:b_sort,b_id:b_id},function(res){
  if(res == 1){
   loadData()
  }
  });
 })
 });
 
 
 
 
</script>
</body>
</html>

这个业务只有一个问题那就是button,我们需要把button的标签换了,换成a标签

Layui实现带查询条件的分页

还有一个点就是在点击查询后,获取的数据是根据条件查的,在把分页初始化一次即可

Layui实现带查询条件的分页

其余的操作跟做跟做分页是一样的

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JSON 编辑器实现代码
Dec 06 Javascript
jquery蒙版控件实现代码
Dec 08 Javascript
Textarea与懒惰渲染实现代码
Jan 04 Javascript
Chosen 基于jquery的选择框插件使用方法
May 30 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
javascript每日必学之运算符
Feb 16 Javascript
VUE+Element环境搭建与安装的方法步骤
Jan 24 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
Nov 01 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 #Javascript
layui表格数据重载
Jul 27 #Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 #Javascript
微信小程序 如何获取网络状态
Jul 26 #Javascript
layui使用数据表格实现购物车功能
Jul 26 #Javascript
layui实现数据表格点击搜索功能
Mar 26 #Javascript
vue eslint简要配置教程详解
Jul 26 #Javascript
You might like
PHP中的CMS的涵义
2007/03/11 PHP
discuz安全提问算法
2007/06/06 PHP
php购物车实现代码
2011/10/10 PHP
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
PHP多进程编程实例详解
2017/07/19 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
js操作select控件的几种方法
2010/06/02 Javascript
js原型链原理看图说明
2012/07/07 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
Linux的文件类型
2012/03/07 面试题
会计出纳员的自我评价
2014/01/15 职场文书
党性心得体会
2014/09/03 职场文书
原告代理词范文
2015/05/25 职场文书
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python
tomcat默认最大连接数及相关调整方法
2022/05/06 Servers
tomcat下部署jenkins的方法
2022/05/06 Servers