datatables.js

datatables.js

'use strict';

var DatatableBasic = (function() {

	// Variables

	var $dtBasic = $('#datatable-basic');
	var $dtBasic2 = $('#datatable-basic2');

	let searchParams = new URLSearchParams(window.location.search)
  let dateInterval = searchParams.get('from-to');

	let start = moment().subtract(29, 'days');
	  let end = moment();

	  if (dateInterval) {
	      dateInterval = dateInterval.split(' - ');
	      start = dateInterval[0];
	      end = dateInterval[1];
	  }

	$('#date_filter').daterangepicker({
      "showDropdowns": true,
      "showWeekNumbers": true,
      "alwaysShowCalendars": true,
      startDate: start,
      endDate: end,
      locale: {
          format: 'YYYY-MM-DD',
          firstDay: 1,
      },
      ranges: {
          'Today': [moment(), moment()],
          'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
          'Last 7 Days': [moment().subtract(6, 'days'), moment()],
          'Last 30 Days': [moment().subtract(29, 'days'), moment()],
          'This Month': [moment().startOf('month'), moment().endOf('month')],
          'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
          'This Year': [moment().startOf('year'), moment().endOf('year')],
          'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
          'All time': [moment().subtract(30, 'year').startOf('month'), moment().endOf('month')],
      }
  }, function(start, end, label) {
    console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));

  });


	// Methods

	function init($this) {

		// Basic options. For more options check out the Datatables Docs:
		// https://datatables.net/manual/options
		let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons)
		var options = {
			buttons: dtButtons,
			keys: !0,
			select: {
				style: "multi"
			},
			language: {
				paginate: {
					previous: "<i class='fas fa-angle-left'>",
					next: "<i class='fas fa-angle-right'>"
				}
			},
		};

		// Init the datatable

		var table = $this.on( 'init.dt', function () {
			$('div.dataTables_length select').removeClass('custom-select custom-select-sm');

	    }).DataTable(options);
	}


	// Events

	if ($dtBasic.length) {
		init($dtBasic);
	}	
	if ($dtBasic2.length) {
		init($dtBasic2);
	}

})();


//
// Buttons Datatable
//

var DatatableButtons = (function() {

	// Variables

	var $dtButtons = $('#datatable-buttons');


	// Methods

	function init($this) {

		// For more options check out the Datatables Docs:
		// https://datatables.net/extensions/buttons/

		var buttons = ["copy", "print"];

		// Basic options. For more options check out the Datatables Docs:
		// https://datatables.net/manual/options

		var options = {

			lengthChange: !1,
			dom: 'Bfrtip',
			buttons: buttons,
			// select: {
			// 	style: "multi"
			// },
			language: {
				paginate: {
					previous: "<i class='fas fa-angle-left'>",
					next: "<i class='fas fa-angle-right'>"
				}
			}
		};

		// Init the datatable

		let minDate, maxDate;
 
		
		 

		var table = $this.on( 'init.dt', function () {
			$('.dt-buttons .btn').removeClass('btn-primary').addClass('btn-sm btn-success');
	    }).DataTable(options);

	    // Custom filtering function which will search data in column four between two values
		// $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
		// 	console.log("data",data)
		// 	console.log(settings, data, dataIndex)
		// 	data.forEach((v,k)=>{
		// 		if(!v.includes(v)){
		// 			return true;
		// 		}
		// 	})
		//     // var min = $('#min').datepicker("getDate");
        //     // var max = $('#max').datepicker("getDate");
        //     let min = new Date(minDate.val());
    	// 	let max =  new Date(maxDate.val());
        //     var startDate = new Date(data[1]);

        //     console.log("min",min)
        //     console.log("max",max)
        //     console.log("startDate",startDate)

        //     if (min == null && max == null) { return true; }
        //     if (min == null && startDate <= max) { return true;}
        //     if(max == null && startDate >= min) {return true;}
        //     if (startDate <= max && startDate >= min) { return true; }
        //     return false;
		// });
		 
		// Create date inputs
		minDate = new DateTime('#min', {
		    format: 'YYYY/MM/D'
		});
		maxDate = new DateTime('#max', {
		    format: 'YYYY/MM/D'
		});
		// $("#min").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
        //     $("#max").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });

	    // Refilter the table
		document.querySelectorAll('#min, #max').forEach((el) => {
		    el.addEventListener('change', () => table.draw());
		});
	}


	// Events

	if ($dtButtons.length) {
		init($dtButtons);
	}

})();