jQuery DataTables TableTools导出 - 获取复选框或单选项的值

时间:2014-09-04 02:17:15

标签: javascript jquery html jquery-datatables tabletools

我正在使用TableTools v2.2.2和DataTables 1.10.0并成功导出一些表内容。 但是,它没有从表格单元格中的复选框中获取值。 如何从单元格中提取值为true或false(或1,0;实际上是否为任何指标)并将其导出?

table = $('#sort1').DataTable({
        stateSave: true,
        filter: false,
        "order": [[sortColumn, "asc"]],
        "pageLength": 25,
        "columnDefs": [
            {
                "targets": ['no-sort'],
                "orderable": false,
            },
        ],          
        "autoWidth": false,
        "tableTools": {
            "aButtons": [                
                {
                    "sExtends": "collection",
                    "sButtonText": "Export",
                    "aButtons": ["csv", "xls", "pdf", "print"],
                    // TODO: Get this working.
                    "fnCellRender": function ( sValue, iColumn, nTr, iDataIndex ) {                     
                        return " TableTools";
                    }
                }
            ],
            "sSwfPath": "/Scripts/plugin/datatables/TableTools/swf/copy_csv_xls_pdf.swf"
        },
        "initComplete": function (oSettings, json) {
            $(this).closest('#sort1_wrapper').find('.DTTT.btn-group').addClass('table_tools_group').children('a.btn').each(function () {
                $(this).addClass('btn-sm btn-default btn-primary');
            });
            if ($('td.dataTables_empty')) {
                $('td.dataTables_empty').parent().hide();
            }
        },
        // This sets the resulting html layout i.e. https://datatables.net/reference/option/dom     
        "dom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-6 hidden-xs'lT>r>" +                      
                 't<"dt-toolbar-footer"<"col-sm-6 col-xs-12 hidden-xs"i><"col-xs-12 col-sm-6"p>><"clear">"'     
    });

你可以看到我一直在尝试使用fnCellRender及其anoynmous方法,但即使我希望它为每个单元格返回“TableTools”,它也不返回任何内容。

我的桌子在这里并且格式正确:

<table class="table table-bordered table-condensed table-hover table-responsive table-striped dataTable" id="sort1" aria-describedby="sort1_info" role="grid">
    <thead>
        <tr role="row"><th style="vertical-align: bottom; width: 1%;" class="no-sort sorting_disabled" rowspan="1" colspan="1" aria-label="">
             <input id="include" name="include" type="checkbox" value="true"><input name="include" type="hidden" value="false">
            </th><th style="vertical-align: bottom; width: 20%;" class="sorting_asc" tabindex="0" aria-controls="sort1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="&amp;nbsp;: activate to sort column ascending">&nbsp;</th><th class="center no-sort sorting_disabled" rowspan="1" colspan="1" aria-label="Tax Agent">Tax Agent</th><th class="center no-sort sorting_disabled" rowspan="1" colspan="1" aria-label="AFSL">AFSL</th><th class="center no-sort sorting_disabled" rowspan="1" colspan="1" aria-label="Auditor">Auditor</th><th class="center no-sort sorting_disabled" rowspan="1" colspan="1" aria-label="Bankruptcy">Bankruptcy</th><th class="center no-sort sorting_disabled" rowspan="1" colspan="1" aria-label="Liquidator">Liquidator</th><th class="center no-sort sorting_disabled" rowspan="1" colspan="1" aria-label="BAS Agent">BAS Agent</th><th class="center no-sort sorting_disabled" rowspan="1" colspan="1" aria-label="SMSF Auditor">SMSF Auditor</th><th class="center no-sort sorting_disabled" rowspan="1" colspan="1" aria-label="CPA">CPA</th><th class="center no-sort sorting_disabled" rowspan="1" colspan="1" aria-label="ICAA">ICAA</th><th class="center no-sort sorting_disabled" rowspan="1" colspan="1" aria-label="CPA Certificate">CPA <br>Certificate</th><th class="center no-sort sorting_disabled" rowspan="1" colspan="1" aria-label="ICAA Certificate">ICAA <br>Certificate</th></tr>
   </thead>
   <tbody>
        <tr role="row" class="odd">
    <input type="hidden" name="AggregEntities.index" autocomplete="off" value="07c8ac97-6984-4f5a-b5bb-8d60888aaccf">
    <input data-val="true" data-val-number="The field EntityId must be a number." data-val-required="The EntityId field is required." id="AggregEntities_07c8ac97-6984-4f5a-b5bb-8d60888aaccf__EntityId" name="AggregEntities[07c8ac97-6984-4f5a-b5bb-8d60888aaccf].EntityId" type="hidden" value="232"><input data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." id="AggregEntities_07c8ac97-6984-4f5a-b5bb-8d60888aaccf__Id" name="AggregEntities[07c8ac97-6984-4f5a-b5bb-8d60888aaccf].Id" type="hidden" value="215">            <td class="center">
                    <label class="checkbox">
        <input checked="checked" class="checked" data-val="true" data-val-required="The Include field is required." id="AggregEntities_07c8ac97-6984-4f5a-b5bb-8d60888aaccf__Include" name="AggregEntities[07c8ac97-6984-4f5a-b5bb-8d60888aaccf].Include" type="checkbox" value="true"><input name="AggregEntities[07c8ac97-6984-4f5a-b5bb-8d60888aaccf].Include" type="hidden" value="false">
        <i></i>
    </label>

                </td>
                <td class="sorting_1">
                    ACS Corporate Group
                        - <b><i>Anthony Bray</i></b>
                </td>
            <td class="center">
                    <span class="onoffswitch">
            <input class="onoffswitch-checkbox" id="AggregEntities_07c8ac97-6984-4f5a-b5bb-8d60888aaccf__TaxAgent_Switch" name="AggregEntities[07c8ac97-6984-4f5a-b5bb-8d60888aaccf].TaxAgent.Switch" readonly="readonly" type="checkbox" value="true"><input name="AggregEntities[07c8ac97-6984-4f5a-b5bb-8d60888aaccf].TaxAgent.Switch" type="hidden" value="false">
            <label class="onoffswitch-label" for="Switch">
                <span class="onoffswitch-inner" data-swchon-text="Yes" data-swchoff-text="No"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </span>

            </td>
            <td class="center">
                    <span class="onoffswitch">
            <input class="onoffswitch-checkbox" id="AggregEntities_07c8ac97-6984-4f5a-b5bb-8d60888aaccf__AFSL_Switch" name="AggregEntities[07c8ac97-6984-4f5a-b5bb-8d60888aaccf].AFSL.Switch" readonly="readonly" type="checkbox" value="true"><input name="AggregEntities[07c8ac97-6984-4f5a-b5bb-8d60888aaccf].AFSL.Switch" type="hidden" value="false">
            <label class="onoffswitch-label" for="Switch">
                <span class="onoffswitch-inner" data-swchon-text="Yes" data-swchoff-text="No"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </span>

            </td>
            <td class="center">
                    <span class="onoffswitch">
            <input class="onoffswitch-checkbox" id="AggregEntities_07c8ac97-6984-4f5a-b5bb-8d60888aaccf__Auditor_Switch" name="AggregEntities[07c8ac97-6984-4f5a-b5bb-8d60888aaccf].Auditor.Switch" readonly="readonly" type="checkbox" value="true"><input name="AggregEntities[07c8ac97-6984-4f5a-b5bb-8d60888aaccf].Auditor.Switch" type="hidden" value="false">
            <label class="onoffswitch-label" for="Switch">
                <span class="onoffswitch-inner" data-swchon-text="Yes" data-swchoff-text="No"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </span>

            </td>
            <td class="center">
                    <span class="onoffswitch">
            <input class="onoffswitch-checkbox" id="AggregEntities_07c8ac97-6984-4f5a-b5bb-8d60888aaccf__Bankruptcy_Switch" name="AggregEntities[07c8ac97-6984-4f5a-b5bb-8d60888aaccf].Bankruptcy.Switch" readonly="readonly" type="checkbox" value="true"><input name="AggregEntities[07c8ac97-6984-4f5a-b5bb-8d60888aaccf].Bankruptcy.Switch" type="hidden" value="false">
            <label class="onoffswitch-label" for="Switch">
                <span class="onoffswitch-inner" data-swchon-text="Yes" data-swchoff-text="No"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </span>

            </td>
            <td class="center">
                    <span class="onoffswitch">
            <input class="onoffswitch-checkbox" id="AggregEntities_07c8ac97-6984-4f5a-b5bb-8d60888aaccf__Liquidator_Switch" name="AggregEntities[07c8ac97-6984-4f5a-b5bb-8d60888aaccf].Liquidator.Switch" readonly="readonly" type="checkbox" value="true"><input name="AggregEntities[07c8ac97-6984-4f5a-b5bb-8d60888aaccf].Liquidator.Switch" type="hidden" value="false">
            <label class="onoffswitch-label" for="Switch">
                <span class="onoffswitch-inner" data-swchon-text="Yes" data-swchoff-text="No"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </span>

            </td>
            <td class="center">
                    <span class="onoffswitch">
            <input class="onoffswitch-checkbox" id="AggregEntities_07c8ac97-6984-4f5a-b5bb-8d60888aaccf__BASAgent_Switch" name="AggregEntities[07c8ac97-6984-4f5a-b5bb-8d60888aaccf].BASAgent.Switch" readonly="readonly" type="checkbox" value="true"><input name="AggregEntities[07c8ac97-6984-4f5a-b5bb-8d60888aaccf].BASAgent.Switch" type="hidden" value="false">
            <label class="onoffswitch-label" for="Switch">
                <span class="onoffswitch-inner" data-swchon-text="Yes" data-swchoff-text="No"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </span>

            </td>
            <td class="center">
                    <span class="onoffswitch">
            <input class="onoffswitch-checkbox" id="AggregEntities_07c8ac97-6984-4f5a-b5bb-8d60888aaccf__SMSFAuditor_Switch" name="AggregEntities[07c8ac97-6984-4f5a-b5bb-8d60888aaccf].SMSFAuditor.Switch" readonly="readonly" type="checkbox" value="true"><input name="AggregEntities[07c8ac97-6984-4f5a-b5bb-8d60888aaccf].SMSFAuditor.Switch" type="hidden" value="false">
            <label class="onoffswitch-label" for="Switch">
                <span class="onoffswitch-inner" data-swchon-text="Yes" data-swchoff-text="No"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </span>

            </td>
            <td class="center">
                    <span class="onoffswitch">
            <input class="onoffswitch-checkbox" id="AggregEntities_07c8ac97-6984-4f5a-b5bb-8d60888aaccf__CPA_Switch" name="AggregEntities[07c8ac97-6984-4f5a-b5bb-8d60888aaccf].CPA.Switch" readonly="readonly" type="checkbox" value="true"><input name="AggregEntities[07c8ac97-6984-4f5a-b5bb-8d60888aaccf].CPA.Switch" type="hidden" value="false">
            <label class="onoffswitch-label" for="Switch">
                <span class="onoffswitch-inner" data-swchon-text="Yes" data-swchoff-text="No"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </span>

            </td>
            <td class="center">
                    <span class="onoffswitch">
            <input class="onoffswitch-checkbox" id="AggregEntities_07c8ac97-6984-4f5a-b5bb-8d60888aaccf__ICAA_Switch" name="AggregEntities[07c8ac97-6984-4f5a-b5bb-8d60888aaccf].ICAA.Switch" readonly="readonly" type="checkbox" value="true"><input name="AggregEntities[07c8ac97-6984-4f5a-b5bb-8d60888aaccf].ICAA.Switch" type="hidden" value="false">
            <label class="onoffswitch-label" for="Switch">
                <span class="onoffswitch-inner" data-swchon-text="Yes" data-swchoff-text="No"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </span>

            </td>
            <td class="center">
                    <span class="onoffswitch">
            <input class="onoffswitch-checkbox" id="AggregEntities_07c8ac97-6984-4f5a-b5bb-8d60888aaccf__CPACertificate_Switch" name="AggregEntities[07c8ac97-6984-4f5a-b5bb-8d60888aaccf].CPACertificate.Switch" readonly="readonly" type="checkbox" value="true"><input name="AggregEntities[07c8ac97-6984-4f5a-b5bb-8d60888aaccf].CPACertificate.Switch" type="hidden" value="false">
            <label class="onoffswitch-label" for="Switch">
                <span class="onoffswitch-inner" data-swchon-text="Yes" data-swchoff-text="No"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </span>

            </td>
            <td class="center">
                    <span class="onoffswitch">
            <input class="onoffswitch-checkbox" id="AggregEntities_07c8ac97-6984-4f5a-b5bb-8d60888aaccf__ICAACertificate_Switch" name="AggregEntities[07c8ac97-6984-4f5a-b5bb-8d60888aaccf].ICAACertificate.Switch" readonly="readonly" type="checkbox" value="true"><input name="AggregEntities[07c8ac97-6984-4f5a-b5bb-8d60888aaccf].ICAACertificate.Switch" type="hidden" value="false">
            <label class="onoffswitch-label" for="Switch">
                <span class="onoffswitch-inner" data-swchon-text="Yes" data-swchoff-text="No"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </span>

            </td>
       </tr>
   </tbody>
   <tfoot>
       <tr><th colspan="2" class="text-align-right" rowspan="1">Total</th><td class="text-align-center" rowspan="1" colspan="1">0 / 1</td><td class="text-align-center" rowspan="1" colspan="1">0 / 1</td><td class="text-align-center" rowspan="1" colspan="1">0 / 1</td><td class="text-align-center" rowspan="1" colspan="1">0 / 1</td><td class="text-align-center" rowspan="1" colspan="1">0 / 1</td><td class="text-align-center" rowspan="1" colspan="1">0 / 1</td><td class="text-align-center" rowspan="1" colspan="1">0 / 1</td><td class="text-align-center" rowspan="1" colspan="1">0 / 1</td><td class="text-align-center" rowspan="1" colspan="1">0 / 1</td><td class="text-align-center" rowspan="1" colspan="1">0 / 1</td><td class="text-align-center" rowspan="1" colspan="1">0 / 1</td></tr>
   </tfoot>
</table>

谢谢, 里斯

1 个答案:

答案 0 :(得分:2)

答案在这里提供: http://datatables.net/forums/discussion/comment/66795#Comment_66795

var table;
$(document).ready(function () {
    //TODO: Get table tools working server-side e.g. https://github.com/ALMMa/datatables.mvc        
    table = $('#sort1').DataTable({
        stateSave: true,
        filter: false,
        "order": [[sortColumn, "asc"]],
        "pageLength": 25,
        "columnDefs": [
            {
                "type" : "html",
                "targets": ['no-sort'],
                "orderable": false,
            },
        ],          
        "autoWidth": false,
        "tableTools": {
            "aButtons": [               
                {
                    "sExtends": "collection",
                    "sButtonText": "Export",
                    "aButtons": [                
                        {
                            sExtends: "csv",                    
                            "fnCellRender": renderColumn                   
                        },
                        {
                            sExtends: "xls",
                            "fnCellRender": renderColumn
                        },
                        {
                            sExtends: "pdf",
                            "fnCellRender": renderColumn
                        },
                        {
                            sExtends: "print",
                        }
                    ]
                }],
            "sSwfPath": "/Scripts/plugin/datatables/TableTools/swf/copy_csv_xls_pdf.swf"
        },
        "initComplete": function (oSettings, json) {
            $(this).closest('#sort1_wrapper').find('.DTTT.btn-group').addClass('table_tools_group').children('a.btn').each(function () {
                $(this).addClass('btn-sm btn-default btn-primary');
            });
            if ($('td.dataTables_empty')) {
                $('td.dataTables_empty').parent().hide();
            }
            $(this).closest('#sort1_wrapper').addClass('dataTables-scrollX');
        },
        // This sets the resulting html layout i.e. https://datatables.net/reference/option/dom     
        "dom": "<'dt-toolbar'<'col-xs-12 col-sm-6'fi><'col-sm-6 col-xs-6 hidden-xs'plT>r>" +                        
                 't<"dt-toolbar-footer"<"col-sm-6 col-xs-12 hidden-xs"i><"col-xs-12 col-sm-6"p>><"clear">"'     
    });


    // Check all boxes.    
    $('#include').click(function () {
        if (this.checked) {
            $('.checked').prop('checked', true);
        }
        else {
            $('.checked').removeAttr('checked');
        }
    });
    $('.checked').click(function () {
        checkInclude();
    });
    checkInclude();
}); 

// This extracts the value from the checkboxes
function renderColumn(value, column, row, iDataIndex) {
    if (column != sortColumn && $(value).find('input.onoffswitch-checkbox').length > 0) {
        return $(value).find('input.onoffswitch-checkbox').prop('checked');
    }
    return value;
}

目前TableTools的设计功能很差,但是要重写。