Wednesday, March 29, 2017

Datatable export excel wraptext and newline



I have 14 column table id is tab1 under div class ajax_list, following code
is to solve Datatable export excel wraptext and newline

$(document).ready( function() {
var buttonCommon = {
  exportOptions: {
    format: {
      body: function(data, column, row) {
        data = data.replace(/<br\s*\/?>/ig, "\r\n");
        data = data.replace(/<.*?>/g, "");
        data = data.replace("&amp;", "&");
        data = data.replace("&nbsp;", "");
        data = data.replace("&nbsp;", "");
        return data;
      }
    }
  }
};
$.extend(true, $.fn.dataTable.defaults, {
  "lengthChange": false,
  "pageLength": 100,
  "orderClasses": false,
  "stripeClasses": [],
  dom: 'Bfrtip',
  buttons: [
    $.extend(true, {}, buttonCommon, {
      extend: 'excel',
      exportOptions: {
        columns: [0, 1, 2, 3, 4, 5,6,7,8,9,10,11,12,13]
      },
      customize: function(xlsx) {
        var sheet = xlsx.xl.worksheets['sheet1.xml'];
       
        $('row c[r^="A"]', sheet).attr( 's', '50' ); //<-- left aligned text
        $('row c[r^="B"]', sheet).attr( 's', '50' ); //<-- left aligned text
        $('row c[r^="C"]', sheet).attr( 's', '55' ); //<-- wrapped text
   //     $('row:first c', sheet).attr( 's', '32' );
        $('row c[r^="D"]', sheet).attr( 's', '55' ); //<-- wrapped text
        $('row c[r^="E"]', sheet).attr( 's', '55' ); //<-- wrapped text
        $('row c[r^="F"]', sheet).attr( 's', '55' ); //<-- wrapped text
        $('row c[r^="G"]', sheet).attr( 's', '55' ); //<-- wrapped text
        $('row c[r^="H"]', sheet).attr( 's', '55' ); //<-- wrapped text
        $('row c[r^="I"]', sheet).attr( 's', '55' ); //<-- wrapped text
        $('row c[r^="J"]', sheet).attr( 's', '55' ); //<-- wrapped text
        $('row c[r^="K"]', sheet).attr( 's', '55' ); //<-- wrapped text
        $('row c[r^="L"]', sheet).attr( 's', '55' ); //<-- wrapped text
        $('row c[r^="M"]', sheet).attr( 's', '55' ); //<-- wrapped text       
        $('row c[r^="N"]', sheet).attr( 's', '55' ); //<-- wrapped text       
      }
    })
  ]
});
      $("div.ajax_list").find('#tab1').DataTable({

                    paging: false,
                    fixedHeader: true
                } );

} );
Reference:
https://jsfiddle.net/lbriquet/0n9j52jx/

In some case, we need to update the cell and  need to reinitialize datatable.
To reinitialize datatable: (for table id is tab1)
              $('#tab1').DataTable( {
                     destroy: true,

                    paging: false,
                    fixedHeader: true
                } );


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

Wednesday, November 30, 2016

Sweet Alert JS library - beautiful replacement of JavaScript Alert



You may think JS alert is boring and less flexible. You can use Sweet Alert. You can download and see the demo of sweet alert from:
http://t4t5.github.io/sweetalert/
Then initialize the plugin by referencing the necessary files (js and css):
<script src="sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="sweetalert.css">
Example 1: error message:
sweetAlert("Not Allowed", "Average of Chair's Recommended Step  exceeds 1.25!", "error"); 

result:
Example 2: error message:
                    sweetAlert({
                            title:" Are you sure?",
                            text:"You will not be able to edit.",
                            type:"warning",
                            showCancelButton:true,
                            confirmButtonClass: "btn-danger",
                            confirmButtonText: "Yes, Submit & Lock",
                            confirmButtonColor: "#DD6B55",
                            cancelButtonText: "Cancel",
                            closeOnConfirm: true,
                            closeOnCancel:true
                    },
                    function(response){
                            if(response == true){
                           
                            }else{
                                   
                            }
                    });


result:

Sunday, November 13, 2016

Bootstrap Datepicker on change firing 3 times



I used Bootstrap Datepicker in js and it fires three times in post
       $('.date-picker').datepicker({
               format: "yyyy-mm-dd",
                autoclose: true
                                });

       $('.date-picker').change(function() {
                         var row = $(this).parent().parent();
                         var stakeholder_id =row.find(".sid").val();
                         var salutation =  $(this).val();
                         var postdata = {stakeholder_id:stakeholder_id,salutation:salutation};
                         var url = '/tracs/ajax/salaryReview_chair_ajax/update_salaryreviewchair';
                         $.post(url, postdata, function(data) {
                                 $("div#notice").html('Salutation is updated.');
                                 $("div#notice").css('display', 'block');
                                 $("div#notice").fadeOut(5000);
                        });
       });

bootstrap-datepicker.js needs to be fixed, the new version can be found:
 https://github.com/uxsolutions/bootstrap-datepicker/tree/master/js
or used
wget https://raw.githubusercontent.com/uxsolutions/bootstrap-datepicker/master/js/bootstrap-datepicker.js

If you still used old bootstrap-datepicker.js, you can use
var datePicker = $('.date-picker').datePicker().on('changeDate', function(ev) {
    //Functionality to be called whenever the date is changed
});
 
or 
var c=0;var send=false;
    $(document).ready(function() {
        jQuery( ".ed" ).datepicker({ 
            format: "yyyy-mm-dd",
            autoclose:!0
        }).on('change',function() {
            if(c==2){
                c=0;
                send=true;
            }else{
                c++;
                send=false;
            }                
        });

    });
 
Reference:
http://stackoverflow.com/questions/22614041/bootstrap-datepicker-on-change-firing-3-times  

Wednesday, October 19, 2016

SEC_ERROR_UNKNOWN_ISSUER when https in Firefox



When you connect to https website in Firrefox, you may get an error: you connection is not secure and SEC_ERROR_UNKNOWN_ISSUER error.

This is due to that Firefox background ssl certificate process is not updated. We can remove temporary Firefox storage to fix the problem. The process is as following:
 
1) Click Any folder in Windows
2) Click Tool->View at top menu of the folder.
 3)  Check "Show hidden files, folder and drive" checkbox
4) Go to C:\Users, click your user name
 5) Backup Firefox bookmark
6) Go to AppData\Local\Mozilla, remove Firefox folder
7) Go to AppData\Roaming\Mozilla, remove Firefox folder
 8) If  folder AppData\LocalLow\Mozilla exsits, go to AppData\LocalLow\Mozilla and remove Firefox folder.