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