成人黄色免费看,国产精品久久久久免费,国产精品免费人成网站

主頁(yè) > 知識(shí)庫(kù) > 在Laravel中使用DataTables插件的方法

在Laravel中使用DataTables插件的方法

DataTables 是一個(gè) jQuery 的表格插件，記錄一下在 Laravel 中使用的常用功能和用法，比如 ajax 獲取數(shù)據(jù)，自定義搜索，效果展現(xiàn)，選項(xiàng)說(shuō)明等等，有一些細(xì)節(jié)記錄下來(lái)方便以后查看。

Laravel 控制器方法

接受 ajax get 請(qǐng)求，返回?cái)?shù)據(jù)。

dataTables 會(huì)自帶一些參數(shù)過(guò)來(lái)，需要按照格式返回?cái)?shù)據(jù)，比如分頁(yè)等。見(jiàn) dataTables 官方文檔說(shuō)明。

代碼如下：

// ajax GET 獲取列表數(shù)據(jù)
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' => '缺少參數(shù)！']);
  }

  $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 獲取列表數(shù)據(jù)
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' => '缺少參數(shù)！']);
  }
 
  $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 發(fā) ajax 請(qǐng)求及一些選項(xiàng)設(shè)置

columnDefs 用來(lái)自定義每個(gè)字段如何展現(xiàn)，可以封裝自己的展現(xiàn)邏輯，也可以獲取到這一行各個(gè)字段的值。

createdRow 可以改變創(chuàng)建每一行的行為，比如修改這一行的樣式等等。

table.draw() 方法可以重新發(fā)起 ajax 請(qǐng)求。

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 "活動(dòng)";
          } else if (data == 2) {
            return "動(dòng)態(tài)";
          }
        },
        "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 "審核通過(guò)";
          } else if (data == -1) {
            return "審核不通過(guò)";
          }
        },
        "targets": 8
      },
      {
        "render": function (data, type, row) {
          if (row.is_audit == 0) {
            return "a class='btn btn-primary audit' data-type = 1>通過(guò)/a> a class='btn btn-danger audit' data-type = 2>不通過(guò)/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: "數(shù)據(jù)加載中...",
      info: "顯示第 _START_ 至 _END_ 條，共 _TOTAL_ 條記錄",
      infoEmpty: "暫無(wú)數(shù)據(jù)",
      lengthMenu: "顯示 _MENU_ 條記錄",
      paginate: {
        first: "首頁(yè)",
        previous: "上一頁(yè)",
        next: "下一頁(yè)",
        last: "最后一頁(yè)"
      }
    }
  });

  $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: "請(qǐng)選擇狀態(tài)",
    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 "活動(dòng)";
          } else if (data == 2) {
            return "動(dòng)態(tài)";
          }
        },
        "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 "審核通過(guò)";
          } else if (data == -1) {
            return "審核不通過(guò)";
          }
        },
        "targets": 8
      },
      {
        "render": function (data, type, row) {
          if (row.is_audit == 0) {
            return "a class='btn btn-primary audit' data-type = 1>通過(guò)/a> a class='btn btn-danger audit' data-type = 2>不通過(guò)/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: "數(shù)據(jù)加載中...",
      info: "顯示第 _START_ 至 _END_ 條，共 _TOTAL_ 條記錄",
      infoEmpty: "暫無(wú)數(shù)據(jù)",
      lengthMenu: "顯示 _MENU_ 條記錄",
      paginate: {
        first: "首頁(yè)",
        previous: "上一頁(yè)",
        next: "下一頁(yè)",
        last: "最后一頁(yè)"
      }
    }
  });
 
  $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: "請(qǐng)選擇狀態(tài)",
    minimumResultsForSearch: Infinity
  });
 
  // 搜索
  $("#searchBtn").click(function(){
    table.draw();
  });
/script>

本文主要記錄給自己看，不做具體的說(shuō)明了。

參考鏈接

dataTables 官方文檔

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

PHP框架Laravel插件Pagination實(shí)現(xiàn)自定義分頁(yè)
推薦幾款用 Sublime Text 開(kāi)發(fā) Laravel 所用到的插件
laravel yajra插件 datatable的使用詳解

標(biāo)簽：巴中山東張家口梅州林芝威海成都泰州

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《在Laravel中使用DataTables插件的方法》，本文關(guān)鍵詞在,Laravel,中,使用,DataTables,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。