当前位置:首页 > 编程教程 > php技术文章 > 在Laravel中使用DataTables插件的方法

介绍Laravel中使用DataTables插件的方法步骤

  • 发布时间:
  • 作者:码农之家
  • 点击:148

这篇文章主要知识点是关于Laravel、DataTables、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

PHP核心技术与最佳实践
  • 类型:PHP编程大小:197.3 MB格式:PDF作者:列旭松,陈文
立即下载

在Laravel中使用DataTables插件的方法

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 官方文档

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

PHP 相关电子书
学习笔记
网友NO.741718

PHP接收App端发送文件流的方法

本文实例讲述了PHP接收App端发送文件流的方法。分享给大家供大家参考,具体如下: 解决思路: 1. 客户端多张图片进行循环上传,同时附带参数,并用一定规则组合生产数据流(图片数据放在最后) 2. 使用数据流进行传输,php服务端用file_get_content('php://input')进行接收 3. 传输完毕后将数据流按照规则分割,取出最后的图片数据,并写入图片文件 示例代码: 以下代码是发送单张图片和参数PHP文件,多张图片可循环调用。 ?php/* curl_post.php */// 设置请求的POST地址,必须是包含网址的域名,不能是相对路径$url = 'http://www.xxx.com/post.php';$pic_data = file_get_contents('./me.jpg');$data = [ 'username=chafang_'.rand(100, 999), 'password='.md5('123456'), 'pic=' = $pic_data, // 这里存放图片数据];// 使用 '#####' 进行分割数组$strData = implode('#####', $data);$curl = curl_init();curl_setopt($curl, CURLOPT_URL, $url);//设……

网友NO.924005

在Mac OS上搭建PHP的Yii框架及相关测试环境

YII集成了单元测试和功能测试,借助phpunit和selenium实现。笔者在配置过程中遇到了不少麻烦,纪录在此。 必要概念 selenium selenium是个著名的自动化测试工具,可以调起本地的浏览器来完成测试,所以可以用来自动化测试web项目。selenium分为服务端和客户端,服务端使用java开发,所以需要一个jdk,服务端在启动时,会启动一个http服务,客户端通过与服务端进行http通信,向服务端发起测试请求,服务端会自动调起浏览器完成测试。测试人员负责编写客户端脚本,支持大部分主流的编程语言,当然实际上这是由于开源社区强大的威力,为不同的语言开发了针对selenium的接口程序而已,服务端和客户端之间的协议笔者并没有研究,因为这并不重要。 phpunit phpunit是php语言的测试框架和工具,在进行单元测试的时候是使用它的框架,在进行功能测试的时候是使……

网友NO.914467

php获取用户真实IP和防刷机制的实例代码

一. 如何获取用户IP地址 public static function getClientIp() { if (getenv('HTTP_CLIENT_IP')) { $ip = getenv('HTTP_CLIENT_IP'); } if (getenv('HTTP_X_REAL_IP')) { $ip = getenv('HTTP_X_REAL_IP'); } elseif (getenv('HTTP_X_FORWARDED_FOR')) { $ip = getenv('HTTP_X_FORWARDED_FOR'); $ips = explode(',', $ip); $ip = $ips[0]; } elseif (getenv('REMOTE_ADDR')) { $ip = getenv('REMOTE_ADDR'); } else { $ip = '0.0.0.0'; } return $ip; } 注意: $_SERVER和getenv的区别,getenv不支持IIS的isapi方式运行的php getenv(“REMOTE_ADDR”)函数在 apache下能正常获取ip地址,而在iis中没有作用,而$_SERVER['REMOTE_ADDR']函数,既可在apache中成功获取访客的ip地址,在iis下也同样有效 一、关于 REMOTE_ADDR 这个变量获取到的是《直接来源》的 IP 地址,所谓《直接来源》指的是直接请求该地址的客户端 IP 。这个 IP 在单服务器的情况下,很准确的是客户端 IP ,无法伪造。当然并不是所有的程序都一……

网友NO.885444

php批量删除操作代码分享

批量删除多条记录,对于比较多的信息,如果没有批量删除功能是非常麻烦的。 1.从数据库中拿一张表过来,写个复选框进行选择 可以加全选复选框 连接数据库什么的都不写啦 代码: form action="piliangshanchu.php" method="post" table border="1" cellspacing="0" cellpadding="0" tr td width="200" input type="checkbox" value="''" name="dx" onclick="checkall(this)" / 编号/td td width="200"姓名/td td width="200"电话/td td width="200" 分组/td td width="200" 操作/td /trtr td input type='checkbox' value='{$attr[0]}' name='item[]' class='ck' / {$attr[0]}/td td{$str}/td td{$attr[2]}/td td{$nation}/td/tr/table input type="submit" value="批量删除"/ /form 外加一个批量删除按钮 上图: 我如果点击全选,利用js点击事件就可以轻松实现全选 代码: script function xxx(qx) {//全选多选的选中状态 var ck = document.getElementsByClassName("ck"); //让下面所有的多选选中状态改变 if……

网友NO.826768

php实现页面纯静态的实例代码

1.先来看下面代码index.PHP ?php// 准备要展示到网页的数据$data = array( array('id'=1,'msg'='hello java'), array('id'=2,'msg'='hello php'), array('id'=3,'msg'='hello python'),);// 渲染到模板// 实际项目一般是在html里渲染// 这里演示 希望能看懂foreach($data as $item){ echo $item['id'].'==='.$item['msg'].'br/';} 我们可以想象访问index.php是什么一个页面效果,但是这个可不是我们想要的纯静态页面哦。 我们已经学过了php实现页面静态化的原理: //www.jb51.net/article/116811.htm 下面来实现一下,看看需要改动哪些代码。 ?php// 准备要展示到网页的数据$data = array( array('id'=1,'msg'='hello java'), array('id'=2,'msg'='hello php'), array('id'=3,'msg'='hello python'),);// 渲染到模板// 实际项目一般是在html里渲染// 这里演示 希望能看懂ob_start(); // 开始输入缓冲控制foreach($data as $item){ echo $item['id'].'==='.$item['msg'].'br/';}// 开始生成静态页面……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com