在Laravel中使用DataTables插件的方法

000

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持免费资源网。

© 版权声明
版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
THE END
PHP
# 编程开发# php
喜欢就支持一下吧
点赞0 分享
网络的头像-偶像资源网
python多维列表总是只转为一维数组问题解决-偶像资源网
python多维列表总是只转为一维数组问题解决
python多维列表总是只转为一维数组问题解决
25天前 41
Python pyecharts 数据可视化模块的配置方法-偶像资源网
Python pyecharts 数据可视化模块的配置方法
Python pyecharts 数据可视化模块的配置方法
25天前 28
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked-偶像资源网
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checke...
28天前 4
jQuery实现滚动效果-偶像资源网
jQuery实现滚动效果
jQuery实现滚动效果
25天前 3
PHP队列原理及基于队列的写文件案例-偶像资源网
PHP队列原理及基于队列的写文件案例
PHP队列原理及基于队列的写文件案例
25天前 2
css文本两端对齐的实现代码-偶像资源网
css文本两端对齐的实现代码
css文本两端对齐的实现代码
28天前 2
相关推荐
python多维列表总是只转为一维数组问题解决-偶像资源网
python多维列表总是只转为一维数组问题解决
python多维列表总是只转为一维数组问题解决
25天前 41
Python pyecharts 数据可视化模块的配置方法-偶像资源网
Python pyecharts 数据可视化模块的配置方法
Python pyecharts 数据可视化模块的配置方法
25天前 28
吊打全网所有精美导航页引导页HTML源码-偶像资源网
吊打全网所有精美导航页引导页HTML源码
吊打全网所有精美导航页引导页HTML源码
28天前 24
css的基本选择器有哪些？-偶像资源网
css的基本选择器有哪些？
css的基本选择器有哪些？
29天前 23
5.9K⭐ 轻松搞定定时任务！Web管理超便捷-偶像资源网
5.9K⭐ 轻松搞定定时任务！Web管理超便捷
5.9K⭐ 轻松搞定定时任务！Web管理超便捷
28天前 23
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked-偶像资源网
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked
28天前 4
评论 抢沙发

请登录后发表评论

    暂无评论内容