Hinsura
7/20/2018 - 2:23 PM

DataTable - v4

var searchPolicyResultsGrid = new Datatable();

searchPolicyResultsGrid = $("#dtPolicySearchResults").DataTable({
  language: {
    url: "/Scripts/DataTables/Turkish.json"
  },
  processing: false,
  searching: true,
  info: true,
  paging: true,
  ordering: true,
  order: [[0, "desc"], [1, "desc"]],
  pageLength: 10,
  lengthChange: false,
  autoWidth: false,
  select: {
    style: "single",
    selector: "tr>td"
  },
  dom: tableTemplate("1"),
  //scrollY: "260px",
  //scrollCollapse: true,d
  createdRow: function (row, data, dataIndex) {
    $(row).attr('id', 'rowItem-' + data.Id);
  },
  columnDefs: [
    { "visible": false, "targets": [0] },
    { "title": "Poliçe", "targets": 1, "searchable": true, "width": "8%" },
    { "title": "Zeyil", "targets": 2, "searchable": true, "width": "5%", "className": "text-center" },
    { "title": "Sigortalı Adı", "targets": 3, "searchable": true, "width": "16%" },
    { "title": "Ürün Adı", "targets": 4, "searchable": true, "width": "21%" },
    { "title": "Şube-Kaynak-Acente", "targets": 5, "searchable": true, "width": "22%" },
    { "title": "Otor. Tar.", "targets": 6, "searchable": false, type: "date", "width": "12%", "className": "text-right" },
    { "title": "Durum", "targets": 7, "searchable": true, "width": "11%" },
    { "title": "T/P", "targets": 8, "searchable": true, "width": "5%" }
  ],
  columns: [
    { data: "Id" },
    { data: "PolicyNo" },
    {
      data: "EndorsementNo",
      type: 'html',
      render: function (data, type, full, meta) {
        if (full.EndorsementType.length > 0) {
          return  '<span style="cursor: help; text-decoration: underline" ' +
                      'data-microtip-position="top" role="tooltip" ' +
                      'aria-label="' + full.EndorsementType + '">' + data +
                  '</span>';
        } else {
          return  '<span>' + data + '</span>';
        }
      }
    },
    { data: "InsuredName" },
    {
        data: "ProductName",
        type: 'html',
        render: function (data, type, full, meta) {
          var fullText = isObjValid(data) ? data : "";
          if (fullText.length > 35) {
            var shortText = data.substr(0, 35);
            return  '<span style="cursor: help" data-microtip-position="top" role="tooltip" ' +
                        'aria-label="' + fullText + '">' + shortText + '...' +
                        '&nbsp;&nbsp;<i class="fa fa-info-circle"></i>' +
                    '</span>';
          } else {
            return fullText;
          }
        }
    },
    {
        data: "AgencyName",
        type: 'html',
        render: function (data, type, full, meta) {
          var fullText = isObjValid(data) ? data : "";
          if (fullText.length > 40) {
            var shortText = data.substr(0, 40);
            return  '<span style="cursor: help" data-microtip-position="top" role="tooltip" ' +
                        'aria-label="' + fullText + '">' + shortText + '...' +
                        '&nbsp;&nbsp;<i class="fa fa-info-circle"></i>' +
                    '</span>';
          } else {
            return fullText;
          }
        }
    },
    { data: 'FirstPolicyAuthDateTime' },
    {
        data: "PolicyStatus",
        type: 'html',
        render: function (data, type, full, meta) {
          var fullText = isObjValid(data) ? data : "";
          if (fullText.length > 18) {
            var shortText = data.substr(0, 18);
            return  '<span style="cursor: help" data-microtip-position="top" role="tooltip" ' +
                        'aria-label="' + fullText + '">' + shortText + '...' +
                        '&nbsp;&nbsp;<i class="fa fa-info-circle"></i>' +
                    '</span>';
          } else {
            return fullText;
          }
        }
    },
    { data: 'ProposalStatus' }
  ],
  initComplete: function (settings, json) {
    @*
    var dtApi = this.api();
    dtApi.clear();
    dtApi.rows.add(JSON.parse('@exceptionsGridServerData')).draw();
    *@
    //$(this).DataTable().buttons().container().appendTo($('.col-md-6.col-sm-6:eq(1)'));

    $("div.filter-tags-icon")
      .html(
        "<span>" + htmlStringInject("inj-icon-filter") + "</span>"
      ).addClass("pull-right");

    $("div.filter-tags-title")
      .html(
        "<span>Filtreler</span>"
      ).addClass("pull-right");

    $("div.redo-search")
      .html(
          "<button class='btn blue-madison' type='button' " +
              "onclick='toggleFilterGridPaneUsability(\"filter\")'>" +
              "<i class='fa fa-search'></i> Tekrar Ara" +
          "</button>"
      ).addClass("pull-right");

    $("#dtPolicySearchResults_filter input[type='search']").removeClass("input-sm input-small");

    $("div.select-and-close-1")
      .html(
          "<button class='btn green-dark select-and-close-btn' " +
              "type='button' id='select-and-close-1' " +
              "onclick='viewPolicyFromSearchResult()' disabled>" +
              "<i class='fa fa-check'></i> Görüntüle" +
          "</button>"
      ).addClass("pull-right");

    searchPolicyResultsGrid.on("select", function (e, dt, type, indexes) {
      //dt.rows(indexes).nodes().to$().addClass("selected");
      selectedPolicy = dt.rows(indexes).data()[0];
      $("#select-and-close-1").removeAttr("disabled");
    });

    searchPolicyResultsGrid.on("deselect", function (e, dt, type, indexes) {
      //dt.rows(indexes).nodes().to$().removeClass("selected");
      selectedPolicy = null;
      $("#select-and-close-1").attr("disabled", "disabled");
    });
  },
  drawCallback: function (settings) {
    //var api = this.api();
    //console.log(api);
    /* fix the column width mismatch betw. body & header when scroller is activated */
    //var scrollYHeight = parseInt(settings.oScroll.sY.replace("px", ""));
    //reAlignScrollableDTColumns("dtPolicySearchResults", scrollYHeight, 200);
  }
});


var tableTemplate = function (ix) {

  return  "<'row'" +
              "<'col-sm-3'" +
                  "f" +
              ">" +
              "<'col-sm-1 no-padding'" +
                  "<'.filter-tags-title'>" +
                  "<'.filter-tags-icon'>" +
              ">" +
              "<'col-sm-6 filter-tags'" +
                  "<'.bar'>" +
              ">" +
              "<'col-sm-2'" +
                  "<'.redo-search'>" +
              ">" +
          ">" +
          "<'row'" +
              "<'col-sm-12'" +
                  "tr" +
              ">" +
          ">" +
          "<'row'" +
              "<'col-sm-6'" +
                  "i" +
              ">" +
              "<'col-sm-6'" +
                  "<'.select-and-close-" + ix + " select-and-close-div'>" +
                  "p" +
              ">" +
          ">";

};


var xhrParams = {
  requestMethod: "POST",
  url: "@searchPolicyUrl",
  dataType: "json",
  data: data,
  formToValidateObj: $(searchPolicyForm),
  blockElem: ".page-container",
  iconOnly: false,
  message: "Aranıyor...",
  unblockOnComplete: true
};

var xhrPromise = jqAjax(xhrParams);
xhrPromise.done(function (jsonData) {

  searchPolicyResultsGrid.clear();
  searchPolicyModalResultsGrid.clear();

  if (jsonData.length > 0) {
    @switch (Model.Referrer)
    {
      case "SearchPolicy":
        @:searchPolicyResultsGrid.rows.add(jsonData).draw();
        break;
      case "SearchPolicyModal":
        @:searchPolicyModalResultsGrid.rows.add(jsonData).draw();
        break;
    }
    toggleFilterGridPaneUsability("grid");
  } else {
    swal({
      title: "Arama Sonucu",
      text: "Kriterlere uygun bir poliçe bulunamadı.",
      type: "warning",
      showCancelButton: false
    });
  }

});
<table class="table table-striped table-bordered table-hover table-interactive" id="dtPolicySearchResults">
  <thead></thead>
  <tbody></tbody>
</table>