backend/public/dist/js/panel.js

var endpoint = "https://rms.rmto.ir/users/cities-projects-count";
var totalCounts = null;
var fromDate, toDate;

$(document).ready(function () {
  fromDate = $("#datepickfrom").persianDatepicker({
    format: "YYYY/MM/DD",
    autoClose: true,
    onSelect: function (unix) {
      fromDate.touched = true;

      $('#datepickto').prop('disabled', '');

      if (
        fromDate.getState().selected.unixDate >=
        toDate.getState().selected.unixDate
      ) {
        toDate.setDate(fromDate.getState().selected.unixDate);
      }

      if (toDate && toDate.options && toDate.options.minDate != unix) {
        let cachedValue = toDate.getState().selected.unixDate;

        toDate.options = { minDate: unix };

        if (toDate.touched) {
          toDate.setDate(cachedValue);
        }
      }
    },
  });

  toDate = $("#datepickto").persianDatepicker({
    format: "YYYY/MM/DD",
    autoClose: true,
    onSelect: function (unix) {
      toDate.touched = true;

      /*if (fromDate && fromDate.options && fromDate.options.maxDate != unix) {

        let cachedValue = fromDate.getState().selected.unixDate;

        fromDate.options = { maxDate: unix };

        if (fromDate.touched) {

          fromDate.setDate(cachedValue);

        }

      }*/
    },
  });

  var table = $("#example").DataTable({
    dom: 'lBfrtip',
    //   "pagingType": "full_numbers",
    pagingType: "simple_numbers",
    language: {
      sEmptyTable: "هیچ داده‌ای در جدول وجود ندارد",
      sInfo: "نمایش _START_ تا _END_ از _TOTAL_ ردیف",
      sInfoEmpty: "نمایش 0 تا 0 از 0 ردیف",
      sInfoFiltered: "(فیلتر شده از _MAX_ ردیف)",
      sInfoPostFix: "",
      sInfoThousands: ",",
      sLengthMenu: "نمایش _MENU_ ردیف",
      sLoadingRecords: "در حال بارگزاری...",
      sProcessing: "در حال پردازش...",
      sSearch: "جستجو: ",
      sZeroRecords: "رکوردی با این مشخصات پیدا نشد",
      oPaginate: {
        sFirst: "برگه‌ی نخست",
        sLast: "برگه‌ی آخر",
        sNext: "بعدی",
        sPrevious: "قبلی",
      },
      oAria: {
        sSortAscending: ": فعال سازی نمایش به صورت صعودی",
        sSortDescending: ": فعال سازی نمایش به صورت نزولی",
      },
    },
    columnDefs: [
      {
        searchable: false,
        orderable: false,
        targets: 0,
      },
      { type: "pstring", targets: 1 },
    ],
    order: [
      [0, null],
      [1, "asc"],
      [2, "desc"],
      [3, "desc"],
      [4, "desc"],
    ],
    order: [[1, "asc"]],
    processing: true,
    ajax: {
      url: endpoint,
      type: "GET",
      dataSrc: function (json) {
        totalCounts = json.data.count;
        return json.data.projects;
      },
    },
    columns: [
      {
        data: null,
        render: function (data, type, row, meta) {
          // console.log(meta.row);
          return meta.row + 1;
        },
      },
      { data: "user_name" },
      { data: "roadItemsProjects" },
      { data: "roadPatrolProjects" },
      { data: "projectsCount" },
      // { data: "date" },
      // {
      //   data: null,
      //   render: function (data, type, row) {
      //     return '<button class="btn btn-info btn-sm">مشاهده/ویرایش</i></button> / <button class="btn btn-info btn-sm">حذف</i></button > ';
      //   },
      // },
    ],
    buttons: [
      {
        extend: 'excelHtml5',
        title: 'Excel',
        text: 'خروجی به اکسل',
        messageTop: 'تعداد فعالیت های ثبت شده اداره کل'
      }
    ],
    footerCallback: function (row, data, start, end, display) {
      var api = this.api();

      // console.log(totalCounts);
      // Update footer
      $(api.column(0).footer()).html("");
      $(api.column(1).footer()).html("مجموع");
      if (totalCounts != null) {
        $(api.column(2).footer()).html(totalCounts.roadItemsCount);
        $(api.column(3).footer()).html(totalCounts.roadPatrolCount);
        $(api.column(4).footer()).html(totalCounts.totalCount);
      }
    },
  });

  table
    .on("order.dt search.dt", function () {
      table
        .column(0, { search: "applied", order: "applied" })
        .nodes()
        .each(function (cell, i) {
          cell.innerHTML = i + 1;
        });
    })
    .draw();
});

$("#sort_date").on("click", function () {
  if ($("#datepickfrom").val() != " " && $("#datepickto").val() != " ") {
    // console.log($("#datepickfrom").val());
    // console.log($("#datepickto").val());
    // console.log(fromDate.getState().selected);
    // console.log(
    //   moment(
    //     fromDate.getState().selected.year +
    //       "/" +
    //       fromDate.getState().selected.month +
    //       "/" +
    //       fromDate.getState().selected.date,
    //     "jYYYY/jM/jD"
    //   ).format("YYYY-M-D")
    // );

    let startDate = moment(
      fromDate.getState().selected.year +
        "/" +
        fromDate.getState().selected.month +
        "/" +
        fromDate.getState().selected.date,
      "jYYYY/jM/jD"
    ).format("YYYY-MM-DD");
    let endDate = moment(
      toDate.getState().selected.year +
        "/" +
        toDate.getState().selected.month +
        "/" +
        toDate.getState().selected.date,
      "jYYYY/jM/jD"
    ).format("YYYY-MM-DD");

    // $("#example").DataTable().clear().draw();
    $("#example")
      .DataTable()
      .ajax.url(endpoint + "?end-date=" + endDate + "&start-date=" + startDate)
      .load();

    // $.ajax({
    //   url: endpoint + "?end-date=" + endDate + "&start-date=" + startDate,
    //   type: "GET",
    //   success: function (result) {
    //     console.log(result);
    //     // $("#example").DataTable().fnClearTable();
    //     // $("#example").DataTable().fnAddData(result);
    //   },
    // });
  }
});