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>
        <tr role="row" class="heading">
          <th>
            <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
              <input type="checkbox" value="1" id="checkall"/>
              <span></span>
            </label>
          </th>
          <th>@Html.DisplayNameFor(model => model.ProductId)</th>
          <th>@Html.DisplayNameFor(model => model.FactorId)</th>
          <th>@Html.DisplayNameFor(model => model.commissionCanBeWaived)</th>
        </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>
</div>

<script>
  $(document).ready(function () {
    
    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 */
      columns: [
        {
          data: "id",
          width: "1%",
          sortable: false,
          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 name="id[]" type="checkbox" class="checkboxes" value="' + $('<div/>').text(data).html() + '"\/>' +
                    '<span></span>' +
                   '</label>';
          }
        }, {
          data: 'productName',
          width: "33%",
          sortable: true,
          searchable: true
        }, {
          data: 'factorName',
          width: "33%",
          sortable: true,
          searchable: true
        }, {
          data: 'commissionCanBeWaived',
          sortable: false,
          searchable: false,
          createdCell: function(td, cellData, rowData, row, col) {
              $(td)
                  .css('text-align', 'center')
                  .css('padding', '9px 10px 7px 10px')
                  .css('font-size', '20px');
          },
          type: "html",
          render: function(data, type, full, meta) {
              if (data == 1) {
                  return htmlStringInject("inj-icon-checked");
              } else {
                  return htmlStringInject("inj-icon-unchecked");
              }
          }
        }
      ]
  
  });
</script>