compare column

by dtnguyen_1608

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="table-com" id="col-table-compare-com">
  <div class="com-bt-process">
    <button class="btn btn-default ch-bt-com" id="addRow"><i class="fa fa-plus"></i> Thêm</button>
    <button class="btn btn-default ch-bt-com" id="deleteRow"><i class="fa fa-minus"></i> Xóa</button>
  </div>
  <table id="col-table-compare" class="table table-bordered table-striped sty-table">
    <thead>
      <tr>
        <th>STT</th>
        <th class="w-25x text-center">
          <input type="checkbox" class="allCheck">
        </th>
        <th>Mã nhân viên</th>
        <th>Tên nhân viên</th>
        <th>Điện thoại</th>
        <th>Email</th>
      </tr>
    </thead>

    <tbody>
      <!--       <tr>
                        <td></td>
                        <td>
                            <input type="checkbox" class="check-del">
                        </td>
                        <td>
                            123
                        </td>
                        <td>
                            Nguyễn Văn A
                        </td>
                        <td>
                            0903863457
                        </td>
                        <td>
                            [email protected]
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <input type="checkbox" class="check-del">
                       ...

JavaScript

"use strict";
$.extend(true, $.fn.dataTable.defaults, {
  "processing": true,
  "serverSide": true,
  "pagingType": "input",
  "deferLoading": 0,
  "paging": true,
  "lengthChange": true,
  "searching": false,
  "ordering": false,
  "sorting": false,
  "info": true,
  "autoWidth": false,
  "dom": '<"top"i>rt<"bottom"lp>',
  //"sPaginationType": "full_numbers", //dung hien thi them 2 nut last and first
  "language": {
    "decimal": "",
    "emptyTable": "Không có hàng nào trên lưới",
    "info": "Đang hiển thị _START_ đến _END_ của _TOTAL_ hàng",
    "infoEmpty": "Hiển thị 0 đến 0 của 0 hàng", //"Showing 0 to 0 of 0 entries",
    "lengthMenu": "Hiển thị _MENU_ hàng trên mỗi trang",
    "paginate": {
      "first": '<i class="fa fa-fast-backward" aria-hidden="true"></i>',
      "last": '<i class="fa fa-fast-forward" aria-hidden="true"></i>',
      "next": '<i class="fa fa-forward" aria-hidden="true"></i>',
      "previous": '<i class="fa fa-backward" aria-hidden="true"></i>'
    },
  }
});

function tableStyle(tableOption, option) {
  $('.table-com .table').each(function(index, el) {
    //var tbItemOption = $(this).DataTable();
    if (typeof option === "undefined") {
      tableOption.on('draw.dt', function() {
        tableOption.column(0).nodes().each(function(cell, i) {
          $(this).addClass('set-width');
          cell.innerHTML = '<span>' + (i + 1) + '</span>';
        });
      }).draw();
    }

    if ($(this).parents('.table-com').find('.wrap-table').length != 0) {
      return;
    } else {
      $(this).parents('.table-com').find(".dataTable").wrap("<div class='wrap-table'></div>");
    }

    $(this).find('thead tr:first-child th:first-child').addClass('set-width');
    $(this).find('tbody').bind("DOMSubtreeModified", function() {
      $(this).find('.dataTables_empty').css('font-size', '14px');
      //console.log('.DOMSubtreeModified');
    });
  });

}

/**
 * Sometimes for quick navigation, it can be useful to allow an end user to
 * enter...