Monday, March 6, 2017

Powerful js library datable to export table in pdf, excel, sorting, freezing column and table header fixed (sticky)



Datable js library can be downloaded from
https://datatables.net/download/release

DataTables

DataTables is the core software of the DataTables project, and involves two primary files, the DataTables Javascript and CSS.

js:
https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js
css:
https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css

FixedHeader

The FixedHeader plug-in will freeze in place the header, footer and left and/or right most columns in a DataTable, ensuring that title information will remain always visible.
js:
https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js
css
https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css 

Example:

$('#myTable').DataTable( {
    fixedHeader: true
} );

FixedColumns

FixedColumns "freezes" in place the left most columns in a scrolling DataTable, to provide a guide to the end user (for example an index column).
js:
https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js 
css
https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.dataTables.min.css

Export pdf and excel

Example

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    } );
} );
In addition to the above code, the following Javascript library files are loaded for use in this example:
 Reference:
https://datatables.net/extensions/buttons/examples/initialisation/export.html 

Sorting

https://datatables.net/examples/basic_init/table_sorting.html

2 comments:

  1. This is an awesome post.Really very informative and creative contents. These concept is a good way to enhance the knowledge.I like it and help me to development very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.
    Fresher Jobs
    Fresher Openings

    ReplyDelete

  2. Wonderful blog.. Thanks for sharing informative Post. Its very useful to me.

    Installment loans
    Payday loans
    Title loans

    ReplyDelete