Excel PDF CSV Export for jQuery Datatable

By -



The Jquery Data-table has PDF ,CSV ,Excel support which  reduce lot of cording by integrating other open source libraries .
 https://datatables.net/extensions/buttons/examples/initialisation/export.html

Here I have indicated step by step guide for the integration .


Step 1 .

 JS Imports 

 dataTables.buttons.min.js  //Provided in \DataTables-1.10.13\extensions\Buttons

buttons.flash.min.js            //Provided in \DataTables-1.10.13\extensions\Buttons
buttons.html5.min.js          //Provided in \DataTables-1.10.13\extensions\Buttons
buttons.print.min.js           //Provided in \DataTables-1.10.13\extensions\Buttons
jszip.min.js                       //Please download from http://stuk.github.io/jszip/
pdfmake.min.js                //Please Download from https://github.com/bpampuch/pdfmake
vfs_fonts.js                     //Please Download from https://github.com/bpampuch/pdfmake

CSS imports 
buttons.dataTables.min.css        //Provided in \DataTables-1.10.13\extensions\Buttons
Step 2 .

                                      $('#table').DataTable( {
"dom": 'Bfrtip',
"buttons": [
'copy', 'csv', 'excel', 'pdf', 'print'
],
"pageLength": 100,
"ajax": "./index.php?                     controller=outlet&action=get&id="+ ter,
"columns": [

Comments

Post a Comment

Popular posts from this blog

ENOENT: no such file or directory, rename : node_modules/async

By -
Image
I have gone trough follwing error ,when I was updating npm. npm ERR! path /Users/interlectivethree/firebase/fetchme/server/node_modules/winston/node_modules/async npm ERR! code ENOENT npm ERR! errno -2 npm ERR! syscall rename npm ERR! enoent ENOENT: no such file or directory, rename '/Users/interlectivethree/firebase/fetchme/server/node_modules/winston/node_modules/async' -> '/Users/interlectivethree/firebase/fetchme/server/node_modules/winston/node_modules/.async.DELETE' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent npm ERR! A complete log of this run can be found in: npm ERR!     /Users/interlectivethree/.npm/_logs/2017-07-07T14_17_29_016Z-debug.log I have done sevarel things like package wise unstall and install ,package relocating .But no success .But I think compleate unstall and reinstall is the best option and follwing commands used. npm uninstall ` ls - 1 node_modules | tr '/\n' ' ...
Read more

react-quill Integrate quill-image-resize-module

By -
Image
React-qill  is a great free package which can be used for design editors. However, if you are using the image upload feature, there is a problem of integrating resize package. This was discussed in may treads and I was able to find the best approach integrate it with react-starter-app. https://www.npmjs.com/package/quill-image-resize-module If you use the following code, import Quill from ' quill ' ; import { ImageResize } from ' quill-image-resize-module ' ; Quill . register ( ' modules/imageResize ' , ImageResize); const quill = new Quill (editor, { // ... modules : { // ... imageResize : { // See optional "config" below } } }); The following error is common. TypeError: Cannot read property 'imports' of undefined var d = window.Quill.imports.parchment In order to overcome the issue , you have to update the node_modules/react-scripts/config/webpack.config....
Read more