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 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
js判断一个元素是否为另一个元素的子元素的代码
Mar 21 Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
jquery的父子兄弟节点查找示例代码
Mar 03 Javascript
理解javascript正则表达式
Mar 08 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 Javascript
JS实现重新加载当前页面
Nov 29 Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
Dec 13 Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 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之第四天
2006/10/09 PHP
php+js实现异步图片上传实例分享
2014/06/02 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
javascript常用代码段搜集
2014/12/04 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
DOM事件探秘篇
2017/02/15 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
js实现手机发送验证码功能
2017/03/13 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
python打开文件并获取文件相关属性的方法
2015/04/23 Python
Python批量修改文本文件内容的方法
2016/04/29 Python
python 计算文件的md5值实例
2017/01/13 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
播音主持女孩的自我评价分享
2013/11/20 职场文书
四年级语文教学反思
2014/02/05 职场文书
公司管理建议书范文
2014/03/12 职场文书
高二语文教学反思
2016/02/16 职场文书
送给客户微信问候语!
2019/07/04 职场文书