问题
最近使用了bootstrap的datatables插件，但是在分页的时候遇到了问题。
效果图
解决方法
引入
这部分就不讲了
开启服务器模式
$("#example1").DataTable({
"serverSide": true,//开启服务器模式
"ajax": "/admin/log/getLoginData",//ajax加载数据
})api端
<?php
/**
* Created by PhpStorm.
* User: Administrator
* Date: 2017/5/5 0005
* Time: 14:38
*/
namespace AppHttpControllersAdmin;
use AppAdmin;
use AppLoginLog;
use AppOperateLog;
use IlluminateHttpRequest;
class LogController {
//登录日志列表页面
public function loginlog() {
return view('admin.log.loginlog');
}
//获取分页信息
private function getPageInfo(Request $request) {
if (!empty($request->draw)) {
$pageInfo = [];
$pageInfo['draw'] = $request->draw;//绘制次数
$pageInfo['start'] = $request->start;//当前第一条记录的开始处
$pageInfo['length'] = $request->length;//查询多少条数据
$username = $request->search['value'];
$adminModel = new Admin();
$pageInfo['search'] = $adminModel->searchByUsername($username);
return $pageInfo;
}
return null;
}
//获取登录日志数据
public function getLoginData(Request $request) {
$pageInfo = $this->getPageInfo($request);//获取分页信息
$logModel = new LoginLog();//创建模型
$logs = $logModel->getLoginLog($pageInfo);//获取登录数据
$count = $logModel->getCount($pageInfo);//获取记录数
return json_encode(
[
'draw' => $pageInfo['draw'],//datatables绘画id
'recordsTotal' => $count['total'],//总的记录数
'recordsFiltered' => $count['search'],//过滤后的记录数
'data' => $logs->toArray()//记录
]
);//返回json数据
}
}这里使用的是Laravel框架，在请求getLoginData方法的时候，首先调用getPageInfo方法，获取到前端的分页信息，前端传来的前端分页信息主要包括：
draw //绘制id,需要返回
start //需要的记录数头
length //需要多少个记录数
search['value'] //搜索字符将分页信息组织起来存放在数组中返回给getLoginData方法。接着创建数据模型，调用数据模型的getLoginLog方法，就是根据分页信息获取指定数据，调用数据模型的getCount方法，就是更具分页信息获取记录数，最后按格式返回数据
{
"draw": "1",
"recordsTotal": 20,
"recordsFiltered": 19,
"data": [
{
"id": 43,
"adminid": 6,
"logintime": 1495268271,
"loginip": 2130706433,
"area": "ip地址有误",
"status": 1,
"type": 1,
"username": "admin",
"loginipstr": "127.0.0.1",
"logintimestr": "2017/05/20 16:17:51"
},
{
"id": 42,
"adminid": 6,
"logintime": 1495262658,
"loginip": 2130706433,
"area": "ip地址有误",
"status": 1,
"type": 1,
"username": "admin",
"loginipstr": "127.0.0.1",
"logintimestr": "2017/05/20 14:44:18"
},
{
"id": 40,
"adminid": 6,
"logintime": 1495178020,
"loginip": 2130706433,
"area": "ip地址有误",
"status": 1,
"type": 1,
"username": "admin",
"loginipstr": "127.0.0.1",
"logintimestr": "2017/05/19 15:13:40"
},
{
"id": 39,
"adminid": 6,
"logintime": 1495107675,
"loginip": 2130706433,
"area": "ip地址有误",
"status": 1,
"type": 1,
"username": "admin",
"loginipstr": "127.0.0.1",
"logintimestr": "2017/05/18 19:41:15"
}
]
}数据模型层（LogModel）
<?php
/**
* Created by PhpStorm.
* User: Administrator
* Date: 2017/5/5 0005
* Time: 14:39
*/
namespace App;
use IlluminateDatabaseEloquentModel;
class LoginLog extends Model {
public $timestamps = false;
public $table = 'log_login';
/**
* 获取系统配置的个数
* @param int $rid
* @param null $pageInfo
*/
public function getCount($pageInfo = null) {
$count = [];
$count['total'] = $this->count();
if ($pageInfo['search'] == '') {//不存在搜索
$count['search'] = $count['total'];
} else {//存在搜索
$count['search'] = $this->whereIn('adminid', $pageInfo['search'])->count();
}
return $count;
}
/**
* 获取登录日志
*/
public function getLoginLog($pageInfo = null) {
if ($pageInfo == null) {//没有分页
$logs = $this
->join('admin', 'log_login.adminid', '=', 'admin.id')
->select('log_login.*', 'admin.username')
->orderBy('logintime', 'desc')
->get();
} else {//存在分页
if ($pageInfo['search'] == '') {//不存在搜索
$logs = $this
->join('admin', 'log_login.adminid', '=', 'admin.id')
->select('log_login.*', 'admin.username')
->orderBy('logintime', 'desc')
->offset($pageInfo['start'])
->limit($pageInfo['length'])
->get();
} else {//存在搜索
$logs = $this
->join('admin', 'log_login.adminid', '=', 'admin.id')
->whereIn('adminid', $pageInfo['search'])
->select('log_login.*', 'admin.username')
->orderBy('logintime', 'desc')
->offset($pageInfo['start'])
->limit($pageInfo['length'])
->get();
}
}
//转换数据格式
foreach ($logs as $log) {
$log->loginipstr = long2ip($log->loginip);
$log->logintimestr = date("Y/m/d H:i:s", $log->logintime);
}
return $logs;
}
}在数据模型层主要就是查询数据，分情况查询数据，情况有：是否存在分页信息，是否存在搜索信息，然后返回数据。
前端数据展示
$("#example1").DataTable({
"serverSide": true,//开启服务器模式
"processing": true,//显示正在加载
"sort": false,//不能排序
"searchable": true,//可以搜索
"language": {//国际化
"zeroRecords": "没有找到记录",
"processing": "正在加载数据...",
"lengthMenu": "每页显示 _MENU_ 条记录",
"info": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
"infoEmpty": "当前显示 0 到 0 条，共 0 条记录",
"infoFiltered": "(从 _MAX_ 条记录中筛选)",
"search": "搜索",
"searchPlaceholder": "登录名",
"paginate": {
"first": "第一页",
"previous": " 上一页 ",
"next": " 下一页 ",
"last": " 最后一页 "
}
},
"ajax": "/admin/log/getLoginData",//加载数据
"columns": [//数据展示
{"data": "id"},
{"data": "username"},
{
"data": "status",
"render": function (data) {
return data == 1 ? "登录成功" : "登录失败";
}
},
{
"data": "type",
"render": function (data) {
return data == 1 ? "用户名成功" : "邮箱登录";
}
},
{"data": "logintimestr"},
{"data": "loginipstr"},
{"data": "area"},
{
"data": null,
"defaultContent": "",
"render": function (data, type, row) {
return "<a href='#myModal' data-toggle='modal' data-id='" + data.id + "'>删除</a>";
}
}
],
})