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 相关文章推荐
js 文件引入实现代码
Apr 23 Javascript
javascript中的关于类型转换的性能优化
Dec 14 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 Javascript
Bootstrap php制作动态分页标签
Dec 23 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 Javascript
jquery插件实现代码雨特效
Apr 24 jQuery
JavaScript中document.activeELement焦点元素介绍
Nov 27 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
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
学习PHP session的传递方式
2016/06/15 PHP
PHP的自定义模板引擎
2017/03/24 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Django REST framework 单元测试实例解析
2019/11/07 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
土木工程师岗位职责
2013/11/24 职场文书
酒店总经理助理岗位职责
2014/02/01 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
小学记事作文之200字
2019/08/06 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书