Datatables with configurations

by Faisal Khan Janjua

HTML

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<div class="dlPopupWrapper thisPopup">
  <div class="dlPopupOuter">
    <div class="dlPopupMiddle">
      <div class="dlPopupContentWrapper">
        <span class="closePopup popupCross"></span>
        <div class="dlPopupContent"></div>
      </div>
    </div>
  </div>
</div>
<div class="filterPopupWrapper thisPopup">
  <div class="filterPopupOuter">
    <div class="filterPopupMiddle">
      <div class="filterPopupContent">
        <div class="fPopupHeader">
          <button class="btn btn-md btn-secondary btn-clearFilter">Clear</button>
          <h1>Filter</h1>
        </div>
        <div class="fPopupBody">
          <div class="fBodyScroll">
          </div>
        </div>
        <div class="fPopupFooter">
          <button class="btn btn-lg btn-secondary closePopup">Cancel</button>
          <button class="btn btn-lg btn-btn-primary btn-applyFilter">Apply</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-xs-12 tbl2nd">
    <div class="mainDataTable">
    </div>
  </div>
</div>

SCSS

.filterPopupWrapper, .dlPopupWrapper {
  width: 100%;
  z-index: 10;
  display:none;
  padding: 20px;
  background: #FFF;
  position: absolute;
  border:1px solid #F00;
}
.selectableRows {
  & td {
    cursor:pointer;
  }
}
.hasActions {
  & td {
    &.noSelect {
      cursor: default !important;
    }
  }
}
.hideText {
  font-size: 0px;
  text-indent: -9999px;
}
.defaultCheckBox {
  display: block;
  padding: 6px 0;
  & input {
    width: 0px;
    height: 0px;
    z-index: -1;
    position: absolute;
    -o-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
  }
  & label {
    z-index: 1;
    padding: 4px;
    cursor: pointer;
    color: #828287;
    position: relative;
    vertical-align: middle;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    &:before {
      top: 0;
      left: 0;
      bottom: 0;
      content: '';
      width: 22px;
      height: 20px;
      margin: auto;
      position: absolute;
      border:1px solid #333;
      background: #FFF;
    }
  }
  & input:checked+label:before {
    background: #F9F;
    border:1px solid #F00;
  }
}
.tableFilters {
  float: right;
  cursor: pointer;
  padding: 4px 10px;
  border: 1px solid #EEE;
  &:hover {
    background: #eee;
  }
}
.btnAction {
	width: 25px;
	height: 25px;
	cursor: pointer;
	margin-right: 6px;
  border: 1px solid #ccc;
	display: inline-block;
	&:last-child {
		margin-right: 0;
	}
	&.edit:before {
	  content: 'E';
	}
	&.delete:before {
	  content: 'D';
	}
	&.view:before {
	  content: 'V';
	}

}

JavaScript

var data4Table = JSON.parse('[{"group":"","status":"ACTIVE","user_info":"BSD-MARKETING .<br>03080051323","msisdn":"03080051323","outstanding_amount":"0","credit_limit":"1000","package":"Pro - Zero","credit_status":"","customer_ref":"1-323723930927","bill_day":"14","due_date":"","customer_name":"BSD-MARKETING ."},{"group":"","status":"ACTIVE","user_info":"BSD-MARKETING .<br>03080051358","msisdn":"03080051358","outstanding_amount":"300","credit_limit":"1500","package":"Executive RED","credit_status":"","customer_ref":"1-323723930927","bill_day":"14","due_date":"","customer_name":"BSD-MARKETING ."},{"group":"","status":"BLOCKED","user_info":"BSD-MARKETING .<br>03080051355","msisdn":"03080051355","outstanding_amount":"250","credit_limit":"1500","package":"ES Standard","credit_status":"","customer_ref":"1-323723930927","bill_day":"14","due_date":"","customer_name":"BSD-MARKETING ."},{"group":"","status":"ACTIVE","user_info":"BSD-MARKETING .<br>03080051327","msisdn":"03080051327","outstanding_amount":"0","credit_limit":"1502","package":"Tracker Service","credit_status":"","customer_ref":"1-323723930927","bill_day":"14","due_date":"","customer_name":"BSD-MARKETING ."},{"group":"","status":"BLOCKED","user_info":"BSD-MARKETING .<br>03080051332","msisdn":"03080051332","outstanding_amount":"583","credit_limit":"1000","package":"M-100","credit_status":"","customer_ref":"1-323723930927","bill_day":"14","due_date":"25-Oct-2018 00:00:00","customer_name":"BSD-MARKETING ."},{"group":"","status":"ACTIVE","user_info":"BSD-MARKETING .<br>03080051357","msisdn":"03080051357","outstanding_amount":"3500","credit_limit":"1500","package":"ES Standard","credit_status":"Credit Limit Exceeded","customer_ref":"1-323723930927","bill_day":"14","due_date":"","customer_name":"BSD-MARKETING ."},{"group":"","status":"ACTIVE","user_info":"BSD-MARKETING .<br>03080051356","msisdn":"03080051356","outstanding_amount":"0","credit_limit":"1500","package":"ES...