4

I'm using jQuery Datatables pluging to view some data and I have in my table two columns containing checkboxes, I've tried to export the data from the table to an XSLX file using excel and excelHtml5 and also excelFlash buttons but I get two empty columns in the file, I've also included JSZip plugin in my project but in vain. How can I get the values of these checkboxes as booleans in my file.

3
  • Can you please create an example on jsFiddle to demonstrate your code and what you've tried so far? Commented Aug 27, 2015 at 18:59
  • okay ! just a few minutes and I'll share the example with you Commented Aug 28, 2015 at 7:57
  • Here is it : jsfiddle.net/neozak/bqwnaekL Commented Aug 28, 2015 at 9:35

1 Answer 1

5

SOLUTION

You're using DataTables 1.10.8. Before this version (1.10.7 and earlier) there was TableTools with fnCellRender option that would help to do what you want. Since 1.10.8 TableTools extension has been replaced with Buttons extension.

With Buttons extension you may use exportOptions and tell DataTables that you want the the data used for sorting (orthogonal: 'sort'). Then you need to define render function and return appropriate data when sorting is performed (type === 'sort').

/*
 * Create an array with the values of all the checkboxes in a column 
 */
$.fn.dataTable.ext.order['dom-checkbox'] = function (settings, col) {
    return this.api()
        .column(col, { order: 'index' })
        .nodes()
        .map(function (td, i) {
            return $('input', td).prop('checked') ? '1' : '0';
        });
};

var table = $('#example1').DataTable({
    dom : 'Bfrtlip',    
    buttons: [
        {
            extend: 'excel',
            exportOptions: {
                orthogonal: 'sort'
            }
        }        
    ],
    columnDefs: [{
       targets:[0,5],
       orderDataType: 'dom-checkbox',
       render: function(data, type, row, meta){
          if(type === 'sort'){
             var api = new $.fn.dataTable.Api( meta.settings );
             var $input = $(api.cell({ row: meta.row, column: meta.col }).node()).find('input');
             data = $input.prop('checked') ? '1' : '0';
          }
           
          return data;    
       }
    }]
});

table.buttons().container()
    .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );

DEMO

See this jsFiddle for code and demonstration.

Sign up to request clarification or add additional context in comments.

3 Comments

Great solution using native functions.
Sorry but this is not a proper solution. Once you change the checkboxes the values are not aligned any more.
@FrankyBoy, it's been fixed, thanks for reporting.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.