FloatBackOfffice/assets/js/pages/members_account_receipts/list.js

$(document).ready(function () {
  function loadMembersAccountReceipts(pageno, filters, btnSearch = null) {
    loadingButton(btnSearch);

    $.ajax({
      url: '/member/loadMembersAccountReceipts',
      type: 'post',
      dataType: 'json',
      data: filters + '&row_no=' + pageno,
      success: function(response) {
        if (response.hasOwnProperty("error")) {
          $('#error-msg').html(response.error);
          $('#print-error-msg').show();
          $('#pagination-members-account-receipts, #members-account-receipts-list').hide();
        } else {
          $('#pagination-members-account-receipts').html(response.pagination);
          createMembersAccountReceiptsTable(response.result);
          $('#pagination-members-account-receipts, #members-account-receipts-list').show();
        }
      },
      complete: function() {
        stopLoadingButton(btnSearch);
      }
    });
  }

  // Load Page Member Account Receipts When Initialize 
  loadMembersAccountReceipts(
    0,
    $('#members-account-receipts-form').serialize()
  );

  function createMembersAccountReceiptsTable(result) {

    $('#members-account-receipts-list tbody').empty();
  
    for (index in result) {
      let id = result[index].id;
      let import_id = result[index].import_id;
      let member_id = result[index].member_id;
      let amount = result[index].amount;
      let currency = result[index].currency;
      let description = result[index].description;
      let time = result[index].time;
      let category = result[index].category;
      let provider_category = result[index].provider_category;
      let merchant_name = result[index].merchant_name;
      let added = result[index].added;
      let updated = result[index].updated;
      let status = result[index].status;
  
      let tr =
        `<tr>
        <td>${id}</td>
        <td>${import_id}</td>
        <td>${member_id}</td>
        <td>${amount}</td>
        <td>${currency}</td>
        <td>${description}</td>
        <td>${time}</td>
        <td>${category}</td>
        <td>${provider_category}</td>
        <td>${merchant_name}</td>
        <td>${added}</td>
        <td>${updated}</td>
        <td>${status}</td>
      </tr>`;
  
      $('#members-account-receipts-list tbody').append(tr);
    }
  }

  // Detect pagination click
  $('#pagination-members-account-receipts').on('click', 'a', function(e) {
    e.preventDefault();
    let page_no = $(this).attr('data-ci-pagination-page');

    if (page_no === undefined) {
      return false;
    }

    loadMembersAccountReceipts(
      $(this).attr('data-ci-pagination-page'),
      $('#members-account-receipts-form').serialize()
    );
  })

  // Prevent submit form by press the enter button
  $(window).keydown(function(event) {
    if (event.keyCode == 13) {
      event.preventDefault();

      loadMembersAccountReceipts(
        0,
        $('#members-account-receipts-form').serialize()
      );
    }
  })

  $('#search_members_account_receipts').click(function() {
    loadMembersAccountReceipts(
      0,
      $('#members-account-receipts-form').serialize(),
      $(this)
    );
  })

   // Datepicker
  $( "#start_date" ).datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    format: 'yyyy-mm-dd',
    onClose: function( selectedDate ) {
      $( "#start_date" ).datepicker( "option", "minDate", selectedDate );
    }
  });

  $( "#end_date" ).datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    format: 'yyyy-mm-dd',
    onClose: function( selectedDate ) {
      $( "#end_date" ).datepicker( "option", "maxDate", selectedDate );
    }
  });

  function loadingButton(btn) {
    if (btn !== null) btn.button('loading');
  }
  
  function stopLoadingButton (btn) {
    if (btn !== null) btn.button('reset');
  }
})