CODEWITHSUNDEEP
javascriptangularjsdatatablesangular-datatables
Varun Sharma
Varun Sharma

Reputation: 4842

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

Upvotes: 2

Views: 1429

Answers (1)

davidkonrad
davidkonrad

Reputation: 85518

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

Upvotes: 1

Related Questions