Search code examples
javascriptangularjsdatatablesangular-datatables

How to put If condition in array for data table in JavaScript?


I am implementing datatable this table contain all row with one API hit. And I want to put condition in java script code. Data table creating through java script. I am sharing my code sample.

$scope.standardOptions = DTOptionsBuilder
   .fromFnPromise(R.all('----api call--').getList())
   .withDOM("<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
   "t" +
   "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>")
   .withBootstrap();

$scope.standardColumns = [               
   DTColumnBuilder.newColumn('flightNo').withOption('defaultContent', '-'),
   DTColumnBuilder.newColumn('eta').renderWith(dataRendererETA).withOption('defaultContent', '-'),
   DTColumnBuilder.newColumn('etd').renderWith(dataRendererETA).withOption('defaultContent', '-'),        
];

API Call DATA

    {
    "_id": "101-87450458_2016_SEP",
    "flightNo": "087",
    "eta": {
          "$date": 1511868720000
          },
    "etd": {
         "$date": 1511875800000
        },
    }

I want to put if condition in second and third DtColumnBuilder. If either eta should print or etd.

I am new in datatables. How can I put condition.

DTColumnBuilder.newColumn('eta').renderWith(dataRendererETA).withOption('defaultContent', '-'), DTColumnBuilder.newColumn('etd').renderWith(dataRendererETA).withOption('defaultContent', '-'),

I want to display one at a time.

enter image description here


Solution

  • You can do it upon initialization :

    $scope.standardColumns = [               
       DTColumnBuilder.newColumn('flightNo').withOption('defaultContent', '-')
    ]
    if (condition) {
       $scope.standardColumns.push( DTColumnBuilder.newColumn('eta').renderWith(dataRendererETA).withOption('defaultContent', '-') )
    } else {
       $scope.standardColumns.push( DTColumnBuilder.newColumn('etd').renderWith(dataRendererETA).withOption('defaultContent', '-') )
    }
    

    or you can create both and hide / show one of the columns using dtInstance based on a condition, for example in a $watch :

    $scope.$watch(‘condition’, function(newVal, oldVal) {
      if (newVal) {
        $scope.dtInstance.DataTable.column(1).visible(true)
        $scope.dtInstance.DataTable.column(2).visible(false)
      } else {
        $scope.dtInstance.DataTable.column(1).visible(false)
        $scope.dtInstance.DataTable.column(2).visible(true)
      }
    });