datatable详解(angular-datatable)+后台分页（springmvc）

datable常规配置，百度一大堆

function prepareDatatable(selector, options) {
            var defaultOptions = {
                autoWidth: true,
                deferRender: true,
                processing: true,
                lengthMenu: [10, 25, 50, 100],
                colReorder: true,

　　　　　　　　　　stateSave:true,//datatable分页刷新后 固定在当前页
　　　　　　　　　　retrieve:true,//和destroy一起，用于屏蔽Cannot reinitialise DataTable提示的
　　　　　　　　　　destroy:true,
                 serverSide: false,//true表示服务器端分页，false表示前端分页 
                 pagingType: "full_numbers",

　　　　　　　　　　//有兴趣的话，可以好好研究一下dom，这就很清楚datatable的布局，也好自己加按钮等
                //dom: '<"dataTables_header"<"dataTables_toolbar" <"dataTables_controls" r>f>>t<"dataTables_footer row"<"col-md-6 m-t" <"pull-left" l><"pull-left" i>><"col-md-6 m-t"p>><"clearfix">',
                dom: '<"dataTables_header"<"dataTables_toolbar" <"dataTables_controls" >f>>t<"dataTables_footer row"<"col-md-6 m-t" <"pull-left" l><"pull-left" i>><"col-md-6 m-t"p>><"clearfix">',
                createdRow: function (row, data, dataIndex) {
                },
                initComplete: function () {
                }
            };

            var tableOption = $.extend(true, {}, defaultOptions);
            if (options != null) {
                $.extend(true, tableOption, options);
            }
            return angular.element(selector).DataTable(tableOption);
        }

 

 

(function () {
    var cacModule = angular.module('oplus.cac');
    //模型控制器
    cacModule.controller('CacJobListCtrl', CacJobListCtrl);
    CacJobListCtrl.$inject = ['$scope', '$timeout', '$state', 'cacService', '$http', '$compile', '$uibModal', '$localStorage', '$stateParams', '$filter', '$sessionStorage'];

    function CacJobListCtrl($scope, $timeout, $state, cacService, $http, $compile, $uibModal, $localStorage, $stateParams, $filter, $sessionStorage) {
        var vm = this;

        vm.views = {
            template: {},
            tableInstance: null,
            findJobStatus: findJobStatus
        };

        var tableOption = {
            id: 'cacJobTable',
            order: [[2, 'desc']],//做了后端分页，前端排序就没用了
            serverSide: true,
            aoColumns: [
                {mData: 'templateName', title: '模板'},
                {
                    mData: 'auditParams', title: '检查项',
                    render: function (data, type, row, meta) {
                        var auditParams = angular.fromJson(row.auditParams);
                        var html = '';
                        for (var i = 0; i < auditParams.length; i++) {
                            var auditParam = auditParams[i];
                            html += '脚本：<strong>' + auditParam.scripts.length + '</strong>，' +
                                '规则：<strong>' + auditParam.ruleExpressions.length + '</strong>，' +
                                '主机：<strong>' + auditParam.hosts.length + '</strong>' +
                                '<br>';

                        }
                        var actionHtml = '<div>' + html + '</div>';
                        return actionHtml;
                    }
                },
                {
                    mData: 'createdAt', title: '开始时间',
                    render: function (data, type, row, meta) {
                        var createdAt = $filter('date')(row.createdAt, 'yyyy-MM-dd HH:mm:ss');//格式化时间
                        return createdAt;
                    }
                },
                {
                    mData: 'endedAt', title: '结束时间',
                    render: function (data, type, row, meta) {
                        var endedAt = $filter('date')(row.endedAt, 'yyyy-MM-dd HH:mm:ss');
                        return endedAt;
                    }
                },
                {mData: 'createdBy', title: '执行人'},
                {
                    mData: 'id', title: '执行状态',
                    render: function (data, type, row, meta) {
                        var id = "'" + row.id + "'";
                        var jobStatus = row.jobStatus;
                        var actionHtml = "";
                        if (jobStatus == "running") {
                            actionHtml = '<button type="button" class="btn btn-info btn-xs" title="查看" ng-click="cacJobListCtrlVm.views.findJobStatus(' + id + ')">' +
                                '正在执行</button>';
                        } else if (jobStatus == "completed") {
                            actionHtml = '<button type="button" class="btn btn-success btn-xs" title="查看" ng-click="cacJobListCtrlVm.views.findJobStatus(' + id + ')">' +
                                '成功</button>';
                        } else {
                            actionHtml = '<button type="button" class="btn btn-danger btn-xs" title="查看" ng-click="cacJobListCtrlVm.views.findJobStatus(' + id + ')">' +
                                '失败</button>';
                        }
                        return actionHtml;
                    },
                    createdCell: function (nTd, sData, oData, iRow, iCol) {
                        $compile(nTd)($scope);
                    }
                },
                {
                    mData: 'id',
                    title: '操作',
                    className: 'text-center',
                    searchable: false,
                    orderable: false,
                    render: function (data, type, row, meta) {
                        var actionHtml =
                            '<div class="btn-group">' +
                            '<a type="button" class="btn btn-default btn-sm" ui-sref="app.cac.result({jobId:\'' + row.id + '\'})">查看结果' +
                            '</a>' +
                            '</div>';
                        return actionHtml;
                    },
                    createdCell: function (nTd, sData, oData, iRow, iCol) {
                        $compile(nTd)($scope);
                    }
                }
            ]
        };
　　　　　//这里包含了几种datatable通过ajax获取数据的几种方式
        function init() {
            if (_appconfig.modules.cac.useLocalDb) {
　　　　　　　　　//1、
                tableOption.ajax = {
                    url: 'app/modules/cac/api/job.json',
                    dataSrc: "aaData"
                };
            } else {
                var token = $localStorage.authenticationToken || $sessionStorage.authenticationToken;
　　　　　　　　　　//2、使用后台分页就只能使用这种，这种请求ajax会自带start和length参数到后台。不然就自己重新前端的分页方法
                tableOption.ajax = {
                    url: _appconfig.apiBaseUrls.cac + '/api/cac/audit/jobs',
                    dataSrc: "data",
                    async: false,
　　　　　　　　　　　　//加headers是为了加token,方便后台的验证
                    headers: {
                        "Authorization": 'Bearer ' + token,
                        "X-JWT-Authorization": 'Bearer ' + token
                    }
                };
　　　　　　　　　　//这里还可以用$http();
　　　　　　　　
　　　　　　　　　　　　

　　　　　　　//3、　　
　　　　　　　$http({
                    url: _appconfig.apiBaseUrls.cac + '/api/cac/audit/hosts'
                }).success(function (ciList, status, header, config, statusText) {
                    tableOption.ajax = function (data, callback, settings) {
                        callback(
                            cacService.assembleTable(ciList)
                        );
                    };

                    $timeout(function () {
                        cacService.prepareDatatable(".cac-template-host-dialog .cac-template-host-table", tableOption);
                    }, 10);
                }).error(function (data, header, config, status) {
                    console.log("Finish  $http ajax error");
                });



　　　　　　　　　　

//将后台返回的List数据组装成datatable要求的数据格式
function assembleTable(ciList) {
    var tableObj = {
        aaData: [],
        totalRecords: 0
    };
    tableObj.aaData = ciList;
    tableObj.totalRecords = ciList.length;
    return tableObj
}

 

            }
            $timeout(function () {
                //初始化datatables，并保存实例
                vm.views.tableInstance = cacService.prepareDatatable(".jobTableDiv .jobTable", tableOption);
            }, 10);

            var template = $stateParams.template;
            if (template != null) {
                $state.go("app.cac.job.addJob", {template: template});
            }
        }

        function findJobStatus(id) {
            $uibModal.open({
                templateUrl: 'app/modules/cac/job/job-run-log.html',
                controller: 'CacJobRunLogCtrl',
                controllerAs: 'cacJobRunLogVm',
                backdrop: 'static',
                size: 'lg',//设置模态框大小
                resolve: {
                    entity: function () {
                        return {
                            id: id
                        }
                    }
                }
            }).result.then(function (result) {
            });
        }

        init();

    }

})
();

java后台

 @GetMapping("/jobs")
    @ResponseBody
    public JSONObject getAllTestPages(@RequestParam(value = "start", defaultValue = "0") Integer start,
                                      @RequestParam(value = "length", defaultValue = "10") Integer length) {
        Sort sort = new Sort(Sort.Direction.DESC, "createdAt");//后台排序
        Pageable pageable = new PageRequest(start / length, length, sort);
        Page<AuditJob> page = auditJobRepository.findAll(pageable);
　　　　　/**后台要返回datatable要求的属性，draw就不需要返回了，因为每次请求的draw是不相同的，每一次前端请求draw都会自增，也会传递到后台，所以后台无需做处理也会自动返回去，做处理就是多此一举而且还很麻烦*/
        JSONObject jsonObject = new JSONObject();
        //将获取的数据组装成Datatable标准格式返回
        jsonObject.put("data", page.getContent());
        //数据总条数
        jsonObject.put("recordsTotal", page.getTotalElements());
        //过滤查询后的条数
        jsonObject.put("recordsFiltered", page.getTotalElements());
        return jsonObject;
    }

 

转载于:https://www.cnblogs.com/zml-java/p/9223037.html