Ứng dụng datatables.net trong ứng dụng web

1. Khởi tạo DataTable
2. Một số ví dụ hay dùng của DataTable.net
 - Định dạng lại cột theo điều kiện
 - Tính tổng hiển thị bên dưới

1. Khởi tạo DataTable

+ Cấu hình cấp 1
<script>  

    $(document).ready(function () {
    $('#example').DataTable();
      
});
 </script>
* #example là id của table trong HTML

+ Cấu hình cấp 2

 <script>  
     $(document).ready(function () {
    $('#example').DataTable(
     {
        "paging":   false,
        "ordering": false,
        "info":     false
    }
    );
});
</script>

+ Cấu hình cấp 3

 <script type="text/javascript">
   $(document).ready(function () {
    $('#dataTable').DataTable(
     {
        "paging":   false,
        "ordering": true,
        "info":     false,
         "language":{
            "paginate": {
            "next": "Tiếp",
            "first": "Tới",
            "previous": "Trước",
            "last": "Lùi" },
            "lengthMenu": "Hiển thị _MENU_ dòng",
            "zeroRecords": "Không tìm thấy kết quả",
            "info": "Hiển thị _START_ đến _END_ (của _TOTAL_ dòng)",
            "infoEmpty": "Hiển thị 0 đến 0 của 0 dòng",
            "search": "Tìm kiếm:",
            "infoFiltered": "(được lọc từ _MAX_ dòng)",
             decimal: ',',
            thousands: '.'
          
        }    
    }
    );
});
</script>

2. Một số ví dụ hay dùng của DataTable.net

  - Định dạng lại cột theo điều kiện

JS:
$(document).ready(function () {
    $('#example').DataTable({
        createdRow: function (row, data, index) {
            if (data[5].replace(/[\$,]/g, '') * 1 > 150000) {
                $('td', row).eq(5).addClass('highlight');
            }
        },
    });
});

Css:
td.highlight {
        font-weight: bold;
        color: blue;
 }

 https://datatables.net/examples/advanced_init/row_callback.html

 - Tính tổng hiển thị bên dưới

$(document).ready(function () {
    $('#example').DataTable({
        footerCallback: function (row, data, start, end, display) {
            var api = this.api();
 
            // Remove the formatting to get integer data for summation
            var intVal = function (i) {
                return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
            };
 
            // Total over all pages
            total = api
                .column(VITRI_COT)
                .data()
                .reduce(function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0);
 
            // Total over this page
            pageTotal = api
                .column(VITRI_COT, { page: 'current' })
                .data()
                .reduce(function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0);
 
            // Update footer
            $(api.column(VITRI_COT).footer()).html('$' + pageTotal + ' ( $' + total + ' total)');
        },
    });
});

JS Gọn:

footerCallback: function (row, data, start, end, display) {
            var api = this.api();
 
            // Remove the formatting to get integer data for summation
            var intVal = function (i) {
                return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
            };
 
            // Total over all pages
            total = api
                .column(VITRI_COT)
                .data()
                .reduce(function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0);
 
            // Total over this page
            pageTotal = api
                .column(VITRI_COT, { page: 'current' })
                .data()
                .reduce(function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0);
 
            // Update footer
            $(api.column(VITRI_COT).footer()).html('$' + pageTotal + ' ( $' + total + ' total)');
 }

VITRI_COT: tính từ 0 trong table

https://datatables.net/examples/advanced_init/footer_callback.html

 - Hiệu ứng css

 * Muốn rê chuột đến row có hiệu ứng thêm vào class table  display
  <table class='table table-bordered display' id='dataTable' width='100%' cellspacing='0'>

 - X2

xxx