Cacher is the code snippet organizer for pro developers

<script src="https://cdn.datatables.net/plug-ins/1.10.16/sorting/intl.js"></script>
 
var exceptionsGrid = new Datatable();
var exceptionsGridLocalData;

$(document).ready(function () {
  
  $.fn.dataTable.ext.order.intl("tr-TR");/* Turkish sorting */
  
  /* build the grid structure */
  exceptionsGrid = $("#datatableExceptions").DataTable({
    language: { url: "/Scripts/DataTables/Turkish.json" },
    processing: false,
    searching: false,
    info: false,
    paging: true,
    lengthChange: true,
    pageLength: 10,
    lengthMenu: [[10, 50, 100, -1], [10, 50, 100, "Hepsi"]],
    order: [[1, "desc"]],
    autoWidth: false,
    createdRow: function(row, data, dataIndex) {
      /* adds and id attribute to each <tr>  */
      $(row).attr('id', 'rowItem-' + data.id);
    },
    columns: [
      {
        data: "id",
        width: "10%",
        createdCell: function (td, cellData, rowData, row, col) {
          $(td).css('text-align', 'center');
        },
        render: function (data, type, full, meta) {
          return '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">' +
                 '<input type="checkbox" class="checkboxes" value="' + $('<div/>').text(data).html() + '"\/>' +
                 '<span></span>' +
                 '</label>';
        }
      }, {
        data: 'name',
        width: "90%"
      }, {
        data: "codes",
        visible: false
      }, {
        data: "endDate",
        visible: false,
        render: function (data, type, full, meta) {
          return formatToTurkishDate(data);
        },
        createdCell: function (td, cellData, rowData, row, col) {
          $(td).css('text-align', 'right');
        }
      }
    ],
    
    initComplete: function(settings, json) {
      
      /* dynamically add rows to grid on page load */
      var dtApi = this.api();
      dtApi.clear();
      dtApi.rows.add(JSON.parse(jsonString)).draw();
      
    },
    
    drawCallback: function( settings ) {
      
      /* mark the rows that need to be deleted */
      exceptionsGrid.$('input[type="checkbox"]').change(function () {
        var itemId = this.value;
        var row = exceptionsGrid.row("#rowItem-" + itemId).node();
        if (this.checked) { $(row).addClass("to-be-deleted"); }
        else { $(row).removeClass("to-be-deleted"); }
      });
      
      /* convert grid data to array of json objects */
      /* used for submitting to controller for db update. */
      exceptionsGridLocalData = getGridDataInJson(exceptionsGrid); /* plugins.js */
    }
    
  });
  
  /* Adds row(s) to table */
  var rowObj = {};
  rowObj.id = selectedObj.value;
  rowObj.name = removeCodesFromAgencyName(selectedObj.text);
  rowObj.codes = getCodesFromAgencyName(selectedObj.text);
  exceptionsGrid.row.add(rowObj).draw();
  
  /* Removes row(s) from table */
  $("#delete-agency").click(function (e) {
    e.preventDefault();
    exceptionsGrid.rows(".to-be-deleted").remove().draw();
    return false;
  });
  
  /* Loops thru rows of table */
  function getGridDataInJson(grid) {
    var dataList = [];
    grid.rows().every(function (rowIdx, tableLoop, rowLoop) {
      var data = this.data();
      dataList.push(data);
    });
    return dataList;
  }

});



/* Output the data for the visible rows */
var completeTableData = exceptionsGrid.rows().data();
var completeTableData = exceptionsGrid.rows({ page: 'current' }).data();



/* manually update cell data */
var apsx = grid.column('networks:name').index();
grid.rows().every(function (rowIdx, tableLoop, rowLoop) {
    var data = this.data();
    data[apsx] = "xxx";
    this.data(data);
    //-- or --
    var planCoverageId = this.cells(apsx).data();
    this.cells(apsx).data("xx");
});

<!-- https://ghosh.github.io/microtip/#usage -->
<span style="cursor: help" data-microtip-position="right" role="tooltip" aria-label="text goes here">

/* https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp */

/* open modal */
openAjaxPopUp('google.com', false, null, "larger", "Yükleniyor");
openAjaxPopUp(url, bindFormSubmit, proceedOnShow, size, msg, backdrop) {}

/* toggle modal */
$("#fileUploadModal").modal("toggle");

/* show modal */
$("#ajaxModal").modal({
  backdrop: backdrop, 
  keyboard: true
}, "show");

/* hide modal */
$("#ajaxModal").modal("hide");

/* -- On Modal Close, Prevent Close -- */
$("body").on("hide.bs.modal", function(e) {
    e.preventDefault();
    console.log("closing");
});

$("body").on("hidden.bs.modal", function(e) {
    e.preventDefault();
    console.log("closed");
});

/* -- Show Event Listener -- */
$("#ajaxModal").on("show.bs.modal", function (e) {
  /*Fix Memory Leak*/
  $(this).off("show.bs.modal");
});

/* -- Shown Event Listener -- */
$("#ajaxModal").on("shown.bs.modal", function (e) {
  /*Fix Memory Leak*/
  $(this).off("shown.bs.modal");
});


/* detect the button that was clicked to close the modal */
/* https://stackoverflow.com/questions/28270333/how-do-i-know-which-button-is-click-when-bootstrap-modal-closes */

/* Expands / Shortens the height of the modal body to fit the entire page. */
function fitModalToFullPage(selector) {/* selector eg: "#ajaxModal" */

}

/* https://select2.org/programmatic-control/events */

/* open event listener */
$("#ProductId").on("select2:open", function (e) {
  $("ul#select2-" + this.id + "-results").attr("style", "font-size: 12px");
});

/* select event listener */
$("#ProductId").on("select2:select", function () {
  console.log($(this).val());
});

/************************************************************/
/* get selected value */
if ($("#PlanId").select2("val") == null) {
  $("#divCoverages").addClass("disabledbutton");
}
/* -- or -- */
var $selectedItem = $("#Sickness option:selected");
var anythingSelected = $selectedItem.val().length > 0;
var selectedVal = $selectedItem.val();
var selectedTxt = $selectedItem.text();

/************************************************************/
/* change event listener */
$("#PlanId").on("change.select2", function () {
  if ($("#PlanId").select2('val') == null) {

  }
});
/* -- or -- */
$ddRiskGroups.on("change", function () {
});

/**************************/
/* select 2 tools - ui.js */
/**************************/

function clearSelectOptions(elemId) {
}

function populateSelect2(elemId, data, selectedValue) {
}

function deselectSelect2(objSelector, selectFirstOption) {
}

function disableSelect2(selectObj) {
}

function enableSelect2(selectObj) {
}

function isAnythingSelected(selector) {/* selector eg: "#Id" */
}

<!-- 
  library ref: https://tipso.object505.com/ 
  default options (tipso_options) are set in Health.Web\js\utils\plugins.js file
-->

<span class="tipso" data-titlecontent="Title Text Goes Here" data-tipso="Content Text Goes Here" 
  data-width="auto" data-position="bottom"></span>
<script>
  /*
    tipso_options.onBeforeShow = function (ele, tipso) {
      ele.tipso('update', 'content', 'before bubble show');
    };
    tipso_options.onShow = function (ele, tipso) {
      ele.tipso('update', 'content', 'bubble shown');
    };
    tipso_options.onHide = function (ele, tipso) {
      ele.destroy();
    };
    tipso_options.contentElementId = "myId-" + guid;
    tipso_options.size = 'tiny', 'small', 'default', 'large'
  */
  $(".tipso").tipso(tipso_options);
</script>

@section PageScriptInclude {
  <script src="~/assets/global/plugins/velocity.min.js"></script>
}
@section PageScriptContent {
  <script>
    toggleDiv("hide", "fast", $divObj);/* UI.js */
    toggleDiv("show", "slow", $divObj);
  </script>
}

$('#tree_2').jstree({
  'plugins': ["wholerow", "checkbox", "types"],
  "checkbox": {
    /* https://www.jstree.com/api/#/?q=$.jstree.defaults.checkbox */
    "three_state": false,
    "cascade": "down"
    /* options above disables child-to-parent cascading but keeps parent-to-child cascading */
  },
  'core': {
    "themes": {
      "responsive": false
    },
    'data': {
      "url": "@Url.Action("GetRolePermissions", new { id = Model ==  null ? string.Empty : Model.Id.ToString() })"
    }
  },
  "types": {
    "default": {
      "icon": "fa fa-folder icon-state-warning icon-lg"
    },
    "file": {
      "icon": "fa fa-file icon-state-warning icon-lg"
    }
  }
}).bind("ready.jstree", function (event, data) {
  $(this).jstree("open_all");
  $("#PermissionIds").val($(this).jstree("get_selected"));
}).bind("changed.jstree", function (event, data) {
  $("#PermissionIds").val($(this).jstree("get_selected"));
});

$(function() {
  if (!abp.auth.isGranted("App.Policy.ViewCoverageDetail")) {
    bindNoAccessTooltip($(".view-coverage"), "Prim Görüntülemeye Yetkiniz Bulunmamaktadır");
  }
});