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();

                  });