javascript - 动态填充 Angularjs 数据表

Question

我正在使用 angularjs 使用动态选项卡视图，这里的选项卡是根据数据库中的记录填充的，并且使用以下代码可以正常工作。

<tabset>
        <tab ng-repeat="workspace in workspaces" select="getContent(workspace.id)" data-id="{{workspace.id}}" heading="{{workspace.name}}" active=workspace.active>
            <div ng-init="workspace=workspace">
                <div ng-bind-html="workspace.content.outerHTML"></div>
            </div>     
        </tab>
</tabset>

但就我而言，对于所有选项卡内容，我想填充 angularjs 数据表。所以我使用以下代码将内容添加到表中。

$scope.workspaces[i].content = $compile(angular.element('<table class="table table-striped table-bordered" datatable dt-instance="dtIntanceCallback" dt-options="dtOptionItem" dt-columns="dtColumnItem"  dt-column-defs="dtColumnItemDefs" cellspacing="0" width="100%"></table>'))($scope)[0];
$scope.workspaces[i].active = true;

并尝试应用角度数据表

$scope.dtIntanceCallback = function (instance) {
      $scope.dtInstanceItem = instance;
}

$scope.dtInstanceItem = {};
var defaultSorting = true;

$scope.dtOptionItem = DTOptionsBuilder.newOptions().withOption('ajax', function (data, callback, settings) {

 if (defaultSorting) {
     defaultSorting = false;
     var sort_order = 'DESC';
     var sort_by = 'product_id';
 } else {
     var sort_order = data.order[0].dir;
     var sort_by = data.columns[data.order[0].column].name;
 }   

 $http.post(path + "/SalesReport/getMarketPlacesItems", {
      length: data.length,
      start: data.start,
      draw: data.draw,
      column_name: sort_by,
      order: sort_order,
      search: data.search.value,
      marketplace_id: marketPlaceId
 }).then(function (res) {
      try {
          var obj = JSON.parse(response.data);
          if (obj.status == "101") {
              restSessionOut.getRstOut();
          }
      } catch (err) {
      }
      if (res.data){
          callback({
                    draw: res.data.draw,
                    recordsTotal: res.data.recordsTotal,
                    recordsFiltered: res.data.recordsFiltered,
                    data: res.data.market_place_data
                    });
      }
 });
 })
   .withDataProp('data')
   .withOption('processing', true)
   .withOption('serverSide', true)
   .withOption('createdRow', createdRow)
   .withOption('destroy', true)
   .withDisplayLength(10)
   .withBootstrap()
   .withPaginationType('full_numbers');

$scope.dtColumnItem = [

DTColumnBuilder.newColumn('productImage').withTitle("Product Picture").withOption('sName', 'productImage').renderWith(renderProductImage),

DTColumnBuilder.newColumn('asin1').withTitle("ASIN").withOption('sName', 'asin1'),

DTColumnBuilder.newColumn('title').withTitle("Product Name").withOption('sName', 'title'),

DTColumnBuilder.newColumn('seller_sku').withTitle("SKU").withOption('sName', 'seller_sku'),

DTColumnBuilder.newColumn('today_sales').withTitle("Sales Today").withOption('sName', 'today_sales'),

DTColumnBuilder.newColumn('today_sales_net').withTitle("Net Sales Today").withOption('sName', 'today_sales_net'),

DTColumnBuilder.newColumn('today_unit_price').withTitle("Today's Unit Price").withOption('sName', 'today_unit_price'),

DTColumnBuilder.newColumn('yes_sales').withTitle("Yesterday Today").withOption('sName', 'yes_sales'),

DTColumnBuilder.newColumn('yes_sales_net').withTitle("Net Sales Yesterday").withOption('sName', 'yes_sales_net'),

DTColumnBuilder.newColumn('yes_unit_price').withTitle("Yesterday's Unit Price").withOption('sName', 'yes_unit_price'),
];

$scope.dtColumnItemDefs = [
       DTColumnDefBuilder.newColumnDef(0).notSortable()
];


function createdRow(row, data, dataIndex) {
         $compile(angular.element(row).contents())($scope);
}

function renderProductImage(data, type, full, meta){
         return '<img src="asin_img/'+data+'" height="60" width="60">';                            
}

搜索分页不显示，排序不工作。

标签： javascriptangularjs