sleek-dashboard/src/_includes/base/scripts.html

Premium & Free Bootstrap 4 admin dashboard template by TAFcoder.com

<script src="assets/plugins/jquery/jquery.min.js"></script>
<script src="assets/plugins/slimscrollbar/jquery.slimscroll.min.js"></script>
<script src="assets/plugins/jekyll-search.min.js"></script>

{% for plugin in page.plugins %}
{% case plugin %}
  {% when 'chart_js' %}
<script src="assets/plugins/charts/Chart.min.js"></script>
  {% when 'google_map' %}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDCn8TFXGg17HAUcNpkwtxxyT9Io9B_NcM" defer></script>
  {% when 'vector_map' %}
<script src="assets/plugins/jvectormap/jquery-jvectormap-2.0.3.min.js"></script>
<script src="assets/plugins/jvectormap/jquery-jvectormap-world-mill.js"></script>
  {% when 'date_range_picker' %}
<script src="assets/plugins/daterangepicker/moment.min.js"></script>
<script src="assets/plugins/daterangepicker/daterangepicker.js"></script>
<script>
  jQuery(document).ready(function() {
    jQuery('input[name="dateRange"]').daterangepicker({
    autoUpdateInput: false,
    singleDatePicker: true,
    locale: {
      cancelLabel: 'Clear'
    }
  });
    jQuery('input[name="dateRange"]').on('apply.daterangepicker', function (ev, picker) {
      jQuery(this).val(picker.startDate.format('MM/DD/YYYY'));
    });
    jQuery('input[name="dateRange"]').on('cancel.daterangepicker', function (ev, picker) {
      jQuery(this).val('');
    });
  });
</script>
  {% when 'select2' %}
<script src="assets/plugins/select2/js/select2.min.js"></script>
  {% when 'ladda' %}
<script src="assets/plugins/ladda/spin.min.js"></script>
<script src="assets/plugins/ladda/ladda.min.js"></script>
  {% when 'jquery_mask' %}
<script src="assets/plugins/jquery-mask-input/jquery.mask.min.js"></script>
  {% when 'toastr' %}
<script src="assets/plugins/toastr/toastr.min.js"></script>
{% when 'circle_progress' %}
<script src="assets/plugins/circle-progress/circle-progress.js"></script>
  {% when 'full_calendar' %}
<script src='assets/plugins/fullcalendar/core-4.3.1/main.min.js'></script>
<script src='assets/plugins/fullcalendar/daygrid-4.3.0/main.min.js'></script>
<script src='assets/app/app.calendar.js'></script>
  {% when 'data_table' %}
<script src="assets/plugins/data-tables/jquery.datatables.min.js"></script>
<script src="assets/plugins/data-tables/datatables.bootstrap4.min.js"></script>
  {% when 'responsive_data_table' %}
<script src="assets/plugins/data-tables/datatables.responsive.min.js"></script>
<script>
  jQuery(document).ready(function() {
    jQuery('#responsive-data-table').DataTable({
      "aLengthMenu": [[20, 30, 50, 75, -1], [20, 30, 50, 75, "All"]],
      "pageLength": 20,
      "dom": '<"row justify-content-between top-information"lf>rt<"row justify-content-between bottom-information"ip><"clear">'
    });
  });
</script>
  {% when 'basic_data_table' %}
<script>
  jQuery(document).ready(function() {
    jQuery('#basic-data-table').DataTable({
      "dom": '<"row justify-content-between top-information"lf>rt<"row justify-content-between bottom-information"ip><"clear">'
    });
  });
</script>
  {% when 'hoverable_data_table' %}
<script>
  jQuery(document).ready(function() {
    jQuery('#hoverable-data-table').DataTable({
      "aLengthMenu": [[20, 30, 50, 75, -1], [20, 30, 50, 75, "All"]],
      "pageLength": 20,
      "dom": '<"row justify-content-between top-information"lf>rt<"row justify-content-between bottom-information"ip><"clear">'
    });
  });
</script>
  {% when 'expendable_data_table' %}
<script>
  /* Formatting function for row details - modify as you need */
  function format () {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>Name...</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>123</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
  }
 
  $(document).ready(function() {
    var table = $('#expendable-data-table').DataTable( {
      "className":      'details-control',
      "order": [[0, 'asc']],
      "aLengthMenu": [[20, 30, 50, 75, -1], [20, 30, 50, 75, "All"]],
      "pageLength": 20,
      "dom": '<"row align-items-center justify-content-between top-information"lf>rt<"row align-items-center justify-content-between bottom-information"ip><"clear">'
    });

    // Add event listener for opening and closing details
    $('#expendable-data-table tbody').on('click', 'td.details-control', function () {
      var tr = $(this).closest('tr');
      var row = table.row( tr );
 
      if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
      }
      else {
        // Open this row
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
      }
    });
  });
</script>
  {% else %}
  <!-- No Extra plugin used -->
{% endcase %}
{% endfor %}

<script src="assets/js/sleek.bundle.js"></script>