Compare table

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 id="dup">
</div>
<div class="table-com" id="col-table-compare-com">
            <div class="com-bt-process">
                <button class="btn btn-default ch-bt-com" id="checkDul"><i class="fa fa-plus"></i> check</button>
                <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>
                            67
                        </td>
                        <td>
                           ...

CSS

.dfsdfasd {
  border: 1px solid #ff0000
}

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');
       ...