datatables服务器分页

问题

最近使用了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>";
            }
        }
    ],
})