首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

在Laravel中使用DataTables插件的方法

Posted in PHP onMay 29, 2018

DataTables 是一个 jQuery 的表格插件，记录一下在 Laravel 中使用的常用功能和用法，比如 ajax 获取数据，自定义搜索，效果展现，选项说明等等，有一些细节记录下来方便以后查看。

Laravel 控制器方法

接受 ajax get 请求，返回数据。

dataTables 会自带一些参数过来，需要按照格式返回数据，比如分页等。见 dataTables 官方文档说明。

代码如下：

// ajax GET 获取列表数据
public function getList(Request $request)
{
  $dynamicType = $request->get('dynamic_type');
  $draw = $request->get('draw');
  $start = $request->get('start');
  $length = $request->get('length');
  $groupId = $request->get('group_id');
  $dynamicId = $request->get('dynamic_id');
  $userid = $request->get('userid');
  $isAudit = $request->get('is_audit', 0);

  if (!$dynamicType || !in_array($dynamicType, [1, 2])) {
    return response()->json(['error' => '缺少参数！']);
  }

  $builder = Dynamics::select(['id', 'userid', 'group_id', 'dynamic_id', 'dynamic_type', 'content', 'money', 'is_audit', 'audited_at'])->where('dynamic_type', $dynamicType);

  //自定义搜索
  if ($groupId) {
    $builder->where('group_id', $groupId);
  }

  if ($dynamicId) {
    $builder->where('dynamic_id', $dynamicId);
  }

  if ($userid) {
    $builder->where('userid', $userid);
  }

  if (!is_null($isAudit)) {
    $builder->where('is_audit', $isAudit);
  }

  $total = $builder->count();
  $list = $builder->orderBy('id', 'desc')->offset($start)->take($length)->get()->toArray();


  $imgInfo = [];
  $dynamicIds = $this->getDynamicIds($list);
  if ($dynamicIds) {
    $imgInfo = DynamicImage::whereIn('dynamic_id', $dynamicIds)->pluck('images', 'dynamic_id');
  }

  $fillImages = function ($item) use ($imgInfo) {
    if (isset($imgInfo[$item['dynamic_id']])) {
      $item["images"] = json_decode($imgInfo[$item['dynamic_id']]);
    } else {
      $item["images"] = [];
    }
    return $item;
  };
  $list = array_map($fillImages, $list);

  $data = [];
  $data["draw"] = $draw;
  $data["recordsTotal"] = $total;
  $data["recordsFiltered"] = $total;
  $data["data"] = $list;
  return response()->json($data);
}


// ajax GET 获取列表数据
public function getList(Request $request)
{
  $dynamicType = $request->get('dynamic_type');
  $draw = $request->get('draw');
  $start = $request->get('start');
  $length = $request->get('length');
  $groupId = $request->get('group_id');
  $dynamicId = $request->get('dynamic_id');
  $userid = $request->get('userid');
  $isAudit = $request->get('is_audit', 0);
 
  if (!$dynamicType || !in_array($dynamicType, [1, 2])) {
    return response()->json(['error' => '缺少参数！']);
  }
 
  $builder = Dynamics::select(['id', 'userid', 'group_id', 'dynamic_id', 'dynamic_type', 'content', 'money', 'is_audit', 'audited_at'])->where('dynamic_type', $dynamicType);
 
  //自定义搜索
  if ($groupId) {
    $builder->where('group_id', $groupId);
  }
 
  if ($dynamicId) {
    $builder->where('dynamic_id', $dynamicId);
  }
 
  if ($userid) {
    $builder->where('userid', $userid);
  }
 
  if (!is_null($isAudit)) {
    $builder->where('is_audit', $isAudit);
  }
 
  $total = $builder->count();
  $list = $builder->orderBy('id', 'desc')->offset($start)->take($length)->get()->toArray();
 
 
  $imgInfo = [];
  $dynamicIds = $this->getDynamicIds($list);
  if ($dynamicIds) {
    $imgInfo = DynamicImage::whereIn('dynamic_id', $dynamicIds)->pluck('images', 'dynamic_id');
  }
 
  $fillImages = function ($item) use ($imgInfo) {
    if (isset($imgInfo[$item['dynamic_id']])) {
      $item["images"] = json_decode($imgInfo[$item['dynamic_id']]);
    } else {
      $item["images"] = [];
    }
    return $item;
  };
  $list = array_map($fillImages, $list);
 
  $data = [];
  $data["draw"] = $draw;
  $data["recordsTotal"] = $total;
  $data["recordsFiltered"] = $total;
  $data["data"] = $list;
  return response()->json($data);
}

dataTables 发 ajax 请求及一些选项设置

columnDefs 用来自定义每个字段如何展现，可以封装自己的展现逻辑，也可以获取到这一行各个字段的值。

createdRow 可以改变创建每一行的行为，比如修改这一行的样式等等。

table.draw() 方法可以重新发起 ajax 请求。

<script type="text/javascript">
  $dataTable = $("#dataTable");
  var table = $dataTable.DataTable({
    "processing": true,
    "serverSide": true,
    "pageLength": 25,
    "lengthMenu": [10, 25, 50, 75, 100, 200],
    "ajax": {
      "url": "{{ route('audit.getList') }}",
      "data": function (data) {
        data.dynamic_type = "{{ Request::get('dynamic_type', 1) }}";
        data.group_id = $("#group_id").val();
        data.dynamic_id = $("#dynamic_id").val();
        data.userid = $("#userid").val();
        data.is_audit = $("#is_audit").val();
        data.t = "{{ time() }}";
      }
    },
    "columns": [
      {"data": "id"},
      {"data": "userid"},
      {"data": "group_id"},
      {"data": "dynamic_type"},
      {"data": "dynamic_id"},
      {"data": "content"},
      {"data": "images"},
      {"data": "money"},
      {"data": "is_audit"},
      {"data": "audited_at"}
    ],
    "columnDefs": [
      {
        "render": function (data, type, row) {
          if (data == 1) {
            return "活动";
          } else if (data == 2) {
            return "动态";
          }
        },
        "targets": 3
      },
      {
        "render": function (data, type, row) {
          html = "";
          $.each(data, function (k, v) {
            html += "<a href='" + v.origin + "' target='_blank'><img src='" + v.origin + "' width='160' style='margin-bottom: 2px;'>";
          });
          return html;
        },
        "targets": 6
      },
      {
        "render": function (data, type, row) {
          if (data == 0) {
            return "未审核";
          } else if (data == 1) {
            return "审核通过";
          } else if (data == -1) {
            return "审核不通过";
          }
        },
        "targets": 8
      },
      {
        "render": function (data, type, row) {
          if (row.is_audit == 0) {
            return "<a class='btn btn-primary audit' data-type = 1>通过</a> <a class='btn btn-danger audit' data-type = 2>不通过</a>";
          }
          return "-";
        },
        "targets": 10
      }
    ],
    "createdRow": function (row, data, index) {
      $('td', row).eq(4).attr('style', 'word-break:break-all');
      $('td', row).eq(2).attr('style', 'word-break:break-all');
      $('td', row).eq(5).attr('style', 'word-break:break-all');
    },
    "language": {
      processing: "数据加载中...",
      info: "显示第 _START_ 至 _END_ 条，共 _TOTAL_ 条记录",
      infoEmpty: "暂无数据",
      lengthMenu: "显示 _MENU_ 条记录",
      paginate: {
        first: "首页",
        previous: "上一页",
        next: "下一页",
        last: "最后一页"
      }
    }
  });

  $dataTable.find('tbody').on('click', '.audit', function () {
    var data = table.row($(this).parents('tr')).data();
    var id = data.id;
    var userid = data.userid;
    var group_id = data.group_id;
    var dynamic_id = data.dynamic_id;
    var dynamic_type = data.dynamic_type;
    var type = $(this).data('type');
    audit(id, type, userid, group_id, dynamic_id, dynamic_type)
  });

  // 审核操作
  function audit(id, type, userid, group_id, dynamic_id, dynamic_type) {
    $.post("{{ route('audit.index') }}/" + id, {
      id: id,
      type: type,
      userid: userid,
      group_id: group_id,
      dynamic_id: dynamic_id,
      dynamic_type: dynamic_type,
      _token: "{{ csrf_token() }}",
      _method: "PUT"
    }, function (data) {
      if (data.result == 0) {
        table.ajax.reload();
        toastr.success("操作成功！");
      }
    });
  }

  $("#is_audit").select2({
    placeholder: "请选择状态",
    minimumResultsForSearch: Infinity
  });

  // 搜索
  $("#searchBtn").click(function(){
    table.draw();
  });
</script>
 
<script type="text/javascript">
  $dataTable = $("#dataTable");
  var table = $dataTable.DataTable({
    "processing": true,
    "serverSide": true,
    "pageLength": 25,
    "lengthMenu": [10, 25, 50, 75, 100, 200],
    "ajax": {
      "url": "{{ route('audit.getList') }}",
      "data": function (data) {
        data.dynamic_type = "{{ Request::get('dynamic_type', 1) }}";
        data.group_id = $("#group_id").val();
        data.dynamic_id = $("#dynamic_id").val();
        data.userid = $("#userid").val();
        data.is_audit = $("#is_audit").val();
        data.t = "{{ time() }}";
      }
    },
    "columns": [
      {"data": "id"},
      {"data": "userid"},
      {"data": "group_id"},
      {"data": "dynamic_type"},
      {"data": "dynamic_id"},
      {"data": "content"},
      {"data": "images"},
      {"data": "money"},
      {"data": "is_audit"},
      {"data": "audited_at"}
    ],
    "columnDefs": [
      {
        "render": function (data, type, row) {
          if (data == 1) {
            return "活动";
          } else if (data == 2) {
            return "动态";
          }
        },
        "targets": 3
      },
      {
        "render": function (data, type, row) {
          html = "";
          $.each(data, function (k, v) {
            html += "<a href='" + v.origin + "' target='_blank'><img src='" + v.origin + "' width='160' style='margin-bottom: 2px;'>";
          });
          return html;
        },
        "targets": 6
      },
      {
        "render": function (data, type, row) {
          if (data == 0) {
            return "未审核";
          } else if (data == 1) {
            return "审核通过";
          } else if (data == -1) {
            return "审核不通过";
          }
        },
        "targets": 8
      },
      {
        "render": function (data, type, row) {
          if (row.is_audit == 0) {
            return "<a class='btn btn-primary audit' data-type = 1>通过</a> <a class='btn btn-danger audit' data-type = 2>不通过</a>";
          }
          return "-";
        },
        "targets": 10
      }
    ],
    "createdRow": function (row, data, index) {
      $('td', row).eq(4).attr('style', 'word-break:break-all');
      $('td', row).eq(2).attr('style', 'word-break:break-all');
      $('td', row).eq(5).attr('style', 'word-break:break-all');
    },
    "language": {
      processing: "数据加载中...",
      info: "显示第 _START_ 至 _END_ 条，共 _TOTAL_ 条记录",
      infoEmpty: "暂无数据",
      lengthMenu: "显示 _MENU_ 条记录",
      paginate: {
        first: "首页",
        previous: "上一页",
        next: "下一页",
        last: "最后一页"
      }
    }
  });
 
  $dataTable.find('tbody').on('click', '.audit', function () {
    var data = table.row($(this).parents('tr')).data();
    var id = data.id;
    var userid = data.userid;
    var group_id = data.group_id;
    var dynamic_id = data.dynamic_id;
    var dynamic_type = data.dynamic_type;
    var type = $(this).data('type');
    audit(id, type, userid, group_id, dynamic_id, dynamic_type)
  });
 
  // 审核操作
  function audit(id, type, userid, group_id, dynamic_id, dynamic_type) {
    $.post("{{ route('audit.index') }}/" + id, {
      id: id,
      type: type,
      userid: userid,
      group_id: group_id,
      dynamic_id: dynamic_id,
      dynamic_type: dynamic_type,
      _token: "{{ csrf_token() }}",
      _method: "PUT"
    }, function (data) {
      if (data.result == 0) {
        table.ajax.reload();
        toastr.success("操作成功！");
      }
    });
  }
 
  $("#is_audit").select2({
    placeholder: "请选择状态",
    minimumResultsForSearch: Infinity
  });
 
  // 搜索
  $("#searchBtn").click(function(){
    table.draw();
  });
</script>

本文主要记录给自己看，不做具体的说明了。

参考链接

dataTables 官方文档

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

在Laravel中使用DataTables插件的方法

- Author -

小谈博客

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
用php写的serv-u的web申请账号的程序
Oct 09 PHP
php split汉字
Jun 05 PHP
php实现利用phpexcel导出数据
Aug 24 PHP
destoon安全设置中需要设置可写权限的目录及文件
Jun 21 PHP
PHP网页游戏学习之Xnova(ogame)源码解读（十一）
Jun 25 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
Aug 22 PHP
PHP中SimpleXML函数用法分析
Nov 26 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
Dec 31 PHP
PHP仿微信多图片预览上传实例代码
Sep 13 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
Oct 17 PHP
php中get_magic_quotes_gpc()函数说明
Feb 06 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
Aug 03 PHP
ThinkPHP实现的rsa非对称加密类示例
May 29 #PHP
PHP中实现中文字串截取无乱码的解决方法
May 29 #PHP
php实现表单提交上传文件功能
May 28 #PHP
PHP封装的非对称加密RSA算法示例
May 28 #PHP
thinkPHP3.2.3结合Laypage实现的分页功能示例
May 28 #PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
May 28 #PHP
PHP测试框架PHPUnit组织测试操作示例
May 28 #PHP
异步机制(1) 远程连接(2) 轮询锁(1) springCloud(6) 逻辑备份(1) sql模式(1) 限流器(1) into outfile(1) 索引树扫描(1) 全表扫描(1)
You might like
重置版游戏视频
2020/04/09 魔兽争霸
PHP版微信小店接口开发实例
2016/11/12 PHP
PHP获取页面执行时间的方法（推荐）
2016/12/10 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
[03:02]安得倚天剑，跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
Python爬取网页中的图片（搜狗图片）详解
2017/03/23 Python
Python算术运算符实例详解
2017/05/31 Python
python实现zabbix发送短信脚本
2018/09/17 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
python命令行工具Click快速掌握
2019/07/04 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
HTML5之SVG 2D入门5—颜色的表示及定义方式
2013/01/30 HTML / CSS
英国领先的瓷砖专家：Walls and Floors
2018/04/27 全球购物
伦敦一家领先的精品零售商：IRIS Fashion
2019/05/24 全球购物
德国二手设计师时装和复古时装跳蚤市场：Mädchenflohmarkt
2020/11/09 全球购物
本科毕业生的求职信范文
2013/11/20 职场文书
社团成立邀请函
2014/01/08 职场文书
酒吧创业计划书
2014/01/18 职场文书
物流专业自荐信
2014/05/23 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
MySQL 5.7常见数据类型
2021/07/15 MySQL
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏
MySQL新手入门进阶语句汇总
2022/09/23 MySQL