Cacher is the code snippet organizer for pro developers

<div class="portlet light portlet-fit portlet-datatable">
  <div class="portlet-body">
    <div class="table-container">
      <table class="table table-striped table-bordered table-hover table-checkable" id="datatable">
        <thead></thead>
        <tbody></tbody>
      </table>
    </div>
  </div>
</div>

<script>
    
  grid = $("#datatable").DataTable({
    serverSide: true,
    language: {
      url: "/Scripts/DataTables/Turkish.json"
    },
    ajax: {
      url: "@pageDataUrl",
      beforeSend: function(xhr) {
        App.blockUI({
          target: ".page-container",
          iconOnly: false,
          message: "<h4>Yükleniyor...</h4>",
          boxed: true
        });
      },
      complete: function(xhr) {
        App.unblockUI(".page-container");
      }
    },
    processing: false,
    paging: true,
    pageLength: 10,
    lengthChange: true,
    lengthMenu: [[10, 50, 100, -1], [10, 50, 100, "Hepsi"]],
    autoWidth: false,
    order: [[1, "desc"]], /* 0-based indexing */
    columnDefs: [
      {
          "targets": 0,
          "type": "html",
          "title": '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">' +
                      '<input type="checkbox" value="1" id="checkall" />' +
                      '<span></span>' +
                   '</label>',
          "sortable": false,
          "orderable": false,
          "className": "no_sorting_icon text-center"
      },
      {
          "targets": 1,
          "title": "@Html.DisplayNameFor(model => model.ProductName)",
          "sortable": true,
          "orderable": true
      },
      {
          "targets": 2, 
          "title": "@Html.DisplayNameFor(model => model.HasAuth)", 
          "searchable": false,
          "orderable": true
      },
      {
          "targets": 3,
          "title": "@Html.DisplayNameFor(model => model.StartDate)",
          "type": "date",
          "searchable": true,
          "orderable": true,
          "className": "text-right"
      },
      {
          "targets": 4,
          "type": "html",
          "title": "@Html.DisplayNameFor(model => model.CommissionCanBeWaived)",
          "searchable": false,
          "orderable": false,
          "className": "text-center"
      }
    ],
    columns: [
      {
        data: "id",
        render: function(data, type, full, meta) {
          return '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">' +
                  '<input name="id[]" type="checkbox" class="checkboxes" value="' + $('<div/>').text(data).html() + '"\/>' +
                  '<span></span>' +
                 '</label>';
      },
      { data: 'productName' },
      {
        data: function (row, type, set) {
          if (row.hasAuth === 1) {
            return 'Var';
          } else {
            return 'Yok';
          }
        }
      }, 
      {
        data: function (row, type, set) {
          if (moment(row.startDate).isValid()) {
            return moment(row.startDate).format("DD.MM.YYYY", 'tr-TR');
          }
          return '';
        },   
        sortable: true,
        searchable: true
      }, 
      {
        data: 'commissionCanBeWaived',
        createdCell: function(td, cellData, rowData, row, col) {
            $(td)
                .css('padding', '9px 10px 7px 10px')
                .css('font-size', '20px');
        },
        render: function(data, type, full, meta) {
            if (data == 1) {
                return htmlStringInject("inj-icon-checked");
            } else {
                return htmlStringInject("inj-icon-unchecked");
            }
        }
      }
    ],
    initComplete: function (settings, json) {
        $('#checkall').click(function () {
            var rows = grid.rows({ 'search': 'applied' }).nodes();
            $('input[type="checkbox"]', rows).prop('checked', this.checked);
        });
    }
  });
    
</script>