angularJs与 datatable 的结合使用小记

//html部分：

<table datatable dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstance" ></table> 

//js部分

    $scope.dtInstance = {};
    $scope.dtOptions = DTOptionsBuilder
        .newOptions()
        .withOption('ajax',{url:'/api/getdate',type:'GET'})//请求的URL及方式
        .withOption('processing', true)               //是否显示正在处理的状态
        .withOption('serverSide', true)               //是否开启服务器模式
        .withOption('destroy', true)                   //销毁所有符合选择table，并且用新的options重新创建表格
        .withDataProp('data','data')          //用来显示表格的数据
        .withOption('searching', false)      //是否允许Datatables开启本地搜索
        .withPaginationType('full_numbers')
        .withOption('lengthChange', false)  //是否允许用户改变表格每页显示的记录数
        .withOption('sort',false)
        .withOption('fnRowCallback',function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            var scope =$scope.$new() ;
            scope.item = aData ;
            $compile(nRow)(scope);
        })  //生成的表格中DOM元素也可识别angular指令
        .withBootstrap();

    $scope.dtColumns = [
        DTColumnBuilder.newColumn('id').withTitle('title1'),
        DTColumnBuilder.newColumn('taskName').withTitle('title2'),
        DTColumnBuilder.newColumn('reversion').withTitle('title3').renderWith(
            function(data, type, full) {
                if(data){
                    return data.substring(0,8) ;
                }else{
                    return "master";
                }
            }
        ),
        DTColumnBuilder.newColumn('codeUrl').withTitle('title4'),
        DTColumnBuilder.newColumn('status').withTitle('title5'),
        DTColumnBuilder.newColumn('createTime').withTitle('title6'),
        DTColumnBuilder.newColumn('lastTime').withTitle('title7'),
        DTColumnBuilder.newColumn('createdBy').withTitle('title8'),
        DTColumnBuilder.newColumn('').withTitle('操作'),
    ] ;
    //重新加载表格：会销毁原dom
     $scope.dtInstance.rerender();
     //更新数据
     $scope.dtInstance.reloadData(null,false) ;