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; }

 

posted @ 2018-06-25 10:10  zouminglan  阅读(5779)  评论(0编辑  收藏  举报