angularJs + datatable使用示例

1.html

<div class="wrapper wrapper-content animated fadeInRight" ng-controller="inventoryLogCtrl as ctrl">
    <div class="table-responsive">
        <table id="so_inventory" datatable
               dt-options="ctrl.dataTable.dtOptions"
               dt-columns="ctrl.dataTable.dtColumns"
               dt-instance="ctrl.dataTable.dtInstance"
               class="table table-striped table-bordered table-hover dataTables-example darkbg-hover item-search-datatables"
               dt-disable-deep-watchers="true">
            <thead>
                <tr>
                    <th>訂單號</th>
                    <th>商品號</th>
                    <th>訂單類型</th>
                    <th>訂單時間</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

2.angularJS controller

/**
 * Created by Scott on 2016/5/17.
 */
/**
 * @author Scott Huang
 * @since 2016-05-17
 */
(function (angular) {
    'use strict';

    function inventoryLogCtrl($compile, $scope, $location, $timeout, $filter, inService,getMsg, buildTable, DTColumnBuilder, localStorageService) {
        var vm = this;

        vm.data = {
            searchFilterData: {
                keyword: "",
                pageSize: "",
                startColumn: "",
                item_number:"",
                order_number:"",
                order_type:"",
                order: {
                    orderColumn: "",
                    orderRule: ""
                }
            }
        };
        vm.search = function () {
            $scope.searchLoading = true;
            $timeout(function () {
                vm.dataTable.dtInstance.DataTable.draw();
                $scope.searchLoading = false;
            }, 1000)
        };

        vm.renderWith={
          setOrderType:function (cellData) {
            if(cellData!=null){
              if(cellData=="out"){
                return "出庫";
              }if(cellData=="in"){
                return "入庫";
              }else{
                return "未知";
              }
            }
          },
          //*******************************************************************
          // cellData 單元格數據 type標識需不須要隱藏 full 表明所有數據
          //*******************************************************************
          setOrderNumberClick:function (cellData, type, full, meta) {
            if(cellData!=null){
              if(full.order_type=="in"){
                return 	'<a target="_blank" href="../po/index.html#/po/poManagement?actionType=orderEdit&order_number='+cellData+'">'+cellData+'</a>';
              }
              if(full.order_type=="out"){
                return 	'<a target="_blank" href="../po/index.html#/po/poManagement?actionType=orderDetail&order_number='+cellData+'">'+cellData+'</a>';
              }
            }else{
              return "";
            }
          },
          setItemNumberClick:function (cellData) {
            if(cellData!=null){
              return 	'<a target="_blank" href="../im/index.html#/im/itemEdit?item_number='+cellData+'">'+cellData+'</a>';
            }else{
              return "";
            }
          },
        }

        vm.events = {
            init: function () {
                vm.events.bindGrid();
                vm.events.queryOrderTypeList();
            },
            bindGrid: function () {
                vm.dataTable = buildTable.YMTable(vm.data.searchFilterData, inService, "queryOrderList");
                vm.dataTable.dtOptions
                .withButtons([
                     //{
                  //    extend: 'copy',
                  //    text: 'copy',
                  //    exportOptions: {
                  //        columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
                  //    }
                  //},
                  //{
                  //    extend: 'print',
                  //    text: 'print',
                  //    exportOptions: {
                  //        columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
                  //    }
                  //},
                  //{
                  //    extend: 'excel',
                  //    text: 'excel',
                  //    exportOptions: {
                  //        columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
                  //    }
                  //}
                ])
                .withOption('fnRowCallback', vm.events.rowCallback)
                .withOption('order', [8, 'desc']);
                vm.dataTable.dtColumns = [
                  DTColumnBuilder.newColumn('order_number').renderWith(vm.renderWith.setOrderNumberClick),
                  DTColumnBuilder.newColumn('item_number').renderWith(vm.renderWith.setItemNumberClick),
                  DTColumnBuilder.newColumn('order_type').renderWith(vm.renderWith.setOrderType),
                  DTColumnBuilder.newColumn('in_dtm').renderWith(setDate),
                ];
            },
            rowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                $compile(angular.element(nRow).contents())($scope);
                return nRow;
            },
            queryOrderTypeList: function () {
                inService.queryOrderTypeList().success(function (data) {
                    if (data.messageId == 10000) {
                        vm.data.order_type = data.body;
                    }
                });
            },

        };
        function setDate(cellData, type, full) {
          if(undefined != cellData && cellData.toString().length > 10) {
            return $filter('date')(cellData ? cellData : '', 'yyyy-MM-dd  HH:mm:ss');
          }
          return $filter('date')(cellData ? cellData * 1000 : '', 'yyyy-MM-dd  HH:mm:ss');
        };

        vm.events.init();
    }

    angular.module('central.in')
      .controller('inventoryLogCtrl', [ '$compile', '$scope', '$location', '$timeout', '$filter', 'inService', 'getMsg', 'buildTable', 'DTColumnBuilder','localStorageService', inventoryLogCtrl]);

})(window.angular);

3.angularJs service

/**
 * INSPINIA - Responsive Admin Theme
 *
 */
angular.module('central.in')
  .service('inService', ['appContext', 'common', 'localStorageService', function (appContext, common, localStorageService) {
      this.queryOrderList = function (oData) {
          return common.baseAjax('http://localhost:8080/queryLogList', 'POST', oData);
      };
      this.queryOrderTypeList = function (oData) {
          return common.baseAjax('http://localhost:8080/queryLogList', 'POST', oData);
      };
  }])

4.注意

因爲是從文件中截取出相關代碼並修改相關變量及方法名,代碼中可能存在錯誤,僅供參考