首页
所有分类
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 文件类型判断代码
Mar 13 PHP
通过PHP修改Linux或Unix口令的方法分享
Jan 30 PHP
深入理解require与require_once与include以及include_once的区别
Jun 05 PHP
php下载文件源代码(强制任意文件格式下载)
May 09 PHP
9个实用的PHP代码片段分享
Jan 22 PHP
Yii获取当前url和域名的方法
Jun 08 PHP
PHP简单的MVC框架实现方法
Dec 01 PHP
PHP6连接SQLServer2005的三部曲
Apr 15 PHP
php多文件打包下载的实例代码
Jul 12 PHP
基于laravel缓冲cache的用法详解
Oct 23 PHP
如何在PHP中使用AES加密算法加密数据
Jun 24 PHP
Nginx+php配置文件及原理解析
Dec 09 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) 缓存(3) 性能优化(3) limit(1) 策略(1) 事务(5) mysql.user(1) 逻辑架构(1) 锁(1) offset(1)
You might like
php addslashes 函数详细分析说明
2009/06/23 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
jquery text()要注意啦
2009/10/30 Javascript
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
Javascript操作表单实例讲解（下）
2016/06/20 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
js实现放大镜特效
2017/05/18 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
layer弹出层扩展主题的方法
2019/09/11 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
[00:12]DAC2018 天才少年转战三号位，他的SOLO是否仍如昔日般强大？
2018/04/06 DOTA
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
Python实现身份证号码解析
2015/09/01 Python
Python实现二维数组输出为图片
2018/04/03 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
Python3 元组tuple入门基础
2020/02/09 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
物业管理个人自我评价
2013/11/08 职场文书
最新农村养殖致富：资金投入较低的创业项目有哪些？
2019/09/26 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书
详解Java实践之抽象工厂模式
2021/06/18 Java/Android