Friday, February 8, 2019

DataTable table order by numeric, not by text



DataTable order default by text, i.e 1, 11, 2,3,4,5,6...
I need the order numeric, i.e. 1,2,3,4,5,6,11
Using                                       
                       "columns": [
                                         { "orderDataType": "dom-text", "type": "numeric" }
                                       ],

Example:
         table= $("#result").find('#'+tableId).DataTable( {
                                         destroy: true,
                                        paging: false,
                                        "columns": [

                                         { "orderDataType": "dom-text", "type": "numeric" }
                                       ],
                                    fixedHeader: true
                                } );

Reference:
https://datatables.net/reference/option/columns.orderDataType
Example1:
$('#example').dataTable( {
  "columns": [
    null,
    null,
    { "orderDataType": "dom-text" },
    { "orderDataType": "dom-text", "type": "numeric" },
    { "orderDataType": "dom-select" },
    { "orderDataType": "dom-checkbox" }
  ]
} );
Example2:
$('#example').dataTable( {
  "columnDefs": [
    { "orderDataType": "dom-text", "targets": [ 2, 3 ] },
    { "type": "numeric", "targets": 3 },
    { "orderDataType": "dom-select", "targets": 4 },
    { "orderDataType": "dom-checkbox", "targets": 5 }
  ]
} );
 

Wednesday, February 6, 2019

DataTable export excel messup when search when colums containing select, input and editable div




 I have a table containing select, input and editable div in columns.
I have scripts to make export to EXCEL correctly in  DataTable  when  not using search box.
When using search box, exporting to EXCEL producing wrong  value.
I can not find a solution. Temporarily when in search mode, I hid the EXCEL button
as following:
                $('input[type="search"]').keyup(function(){

                   var search = $(this).val();                       
                   if(search.trim()=='')
                     $(".dt-buttons").show();
                   else
                     $(".dt-buttons").hide();

                  });    

Thursday, January 3, 2019

Move cursor at end after paste in jQuery




Using $(this).html(textstring1) in JavaScript,   the  cursor will be at the top.
The following code is to move cursor to the end:
        $.fn.focusEnd = function() {
            $(this).focus();
            var tmp = $('<span />').appendTo($(this)),
                node = tmp.get(0),
                range = null,
                sel = null;

            if (document.selection) {
                range = document.body.createTextRange();
                range.moveToElementText(node);
                range.select();
            } else if (window.getSelection) {
                range = document.createRange();
                range.selectNode(node);
                sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(range);
            }
            tmp.remove();
            return this;
        }

Example:
function clickother_cflnew($td){
        $.fn.focusEnd = function() {
            $(this).focus();
            var tmp = $('<span />').appendTo($(this)),
                node = tmp.get(0),
                range = null,
                sel = null;

            if (document.selection) {
                range = document.body.createTextRange();
                range.moveToElementText(node);
                range.select();
            } else if (window.getSelection) {
                range = document.createRange();
                range.selectNode(node);
                sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(range);
            }
            tmp.remove();
            return this;
        }
        $td.find('.cfl_new_other').on('paste', function(event){
                event.preventDefault();

                var text = (event.originalEvent || event).clipboardData.getData('text/plain') || prompt('Paste something..');

                window.document.execCommand('insertText', false, text);
                textstring = $(this).html();
                textstring1 = textstring.replace(/<div>/g, '<br>').replace(/<\/div>/g, '');
                textstring1 = textstring1.replace(/&nbsp/g, ' ');
                $(this).html(textstring1);
               // $(this).html($(this).html().replace(/<div>/g, '<br>').replace(/<\/div>/g, '<br>'));
                 $(this).focusEnd();


        });
   
        $td.find('.cfl_new_other').unbind('keyup change input').bind("keyup change input",function() {
                el = $(this);
                textstring = el.html();
                textstring1 = textstring.replace(/<div>/g, '<br>').replace(/<\/div>/g, '');
                textstring1 = textstring1.replace(/&nbsp/g, ' ');
                if(textstring1.length >= 500){
                    alert("Maximum 500 characters");
                    el.html( textstring1.substr(0, 500) );
                     el.focusEnd();
                     $(this).parent().find(".charNum").text( " 0 character remaining.");
                } else {
                    $(this).parent().find(".charNum").text((500-textstring1.length) + " characters remaining.");
                }
        });   
}       

Datatable export to excel bug not completly updated according to sorting




When I  click the header column to sort in a table using DataTable,
the export excel is only half columns correct. This is due to that my columns have
input, select and editable div. If  all columns are text, the export after sorting is fine.

I can not find a solution. The temporarily solution is  always  to export the original
sorting, i.e not export the current view after sorting.
 code
 modifier: { order: 'index' },

Example:
                                 extend: 'excel',
                                  exportOptions: {
                                          columns: ':visible',
                                          modifier: { order: 'index' },
                                 },