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

datatables.net giúp người lập trình ứng dụng web tạo ra các table có tìm kiếm và nhiều chức năng hỗ trợ người dùng

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