Question

我能够弄清楚如何使用JQuery隐藏我想要的行。我有一个为用户弹出的模态取消选中他们想要隐藏的行的复选框。它工作得很好但是当我将它导出到excel时它仍然显示隐藏的行。我根本没有使用API，我认为这是我的问题。我使用.show()和.hide()隐藏了行。我正在使用API隐藏列，当我单击导出到excel按钮时，它工作得很好。任何人都可以帮我弄清楚如何隐藏行，并能够将其导出到excel，而电子表格中没有显示这些行吗？

HTML

<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js">
</script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">
</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js">
</script>

<table cellpadding="0" cellspacing="0" border="0" class="dataTable" class="example">
    <thead>
        <tr>
            <th>Item</th>
            <th>Store 1</th>
            <th>Store 2</th>
            <th>Store 3</th>
            <th>Store 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Sugar</td>
            <td>21</td>
            <td>95</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>Coffee</td>
            <td>5</td>
            <td>41</td>
            <td>5</td>
            <td>1</td>
        </tr>
        <tr>
            <td>Banana</td>
            <td>123</td>
            <td>323</td>
            <td>22</td>
            <td>233</td>
        </tr>
        <tr>
            <td>Gum</td>
            <td>13</td>
            <td>213</td>
            <td>2</td>
            <td>33</td>
        </tr>
        <tr>
            <td>Milk</td>
            <td>23</td>
            <td>24</td>
            <td>44</td>
            <td>242</td>
        </tr>

    </tbody>
</table>

        </div>
    </body>

的JavaScript

 var table = $('.example').DataTable({
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'excelHtml5',
                exportOptions: {
                    columns: ':visible'
                },
                text: 'Export to Excel'
            },
        ],

    });
    // I get the attribute name from the checkbox and I match it with the id on the row and when the checkbox is unchecked I hide the rows.
    $('input.rowsHideSeek').click(function() {
        var name = $(this).attr('name');
        if ($(this).is(':checked')) {
            $('#' + name).show()

        } else {
            $('#' + name).hide()

        }
    });

Answer 1

这是我提出的，似乎有效。它显示和隐藏行，并在导出时仅显示未隐藏的行。

这是在jsbin http://jsbin.com/qituvu/edit?output

上

关键部分是它在扩展的excelHtml5中使用customizeData。

$(document).ready(function () {
        // this just creates a critera to filter on
        var faketype = 1;
        for (var i = 0; i < dataStore.data1.length; ++i) {
            dataStore.data1[i].type = faketype++;
            if (faketype == 5) faketype = 1;
        }
        var aTable = $('#example').DataTable({
            "data": dataStore.data1,
            paging:false,
            "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office", className: "editColumn" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" },
            { "data": "type"}
            ], dom: 'Bfrti',
            "createdRow": function( row, data, dataIndex ) {
                $(row).addClass('type_' + data.type);
            },
            buttons: [{text:"Excel",
                extend: 'excelHtml5', customizeData: function (exData) {
                    var rowNodes = aTable.rows().nodes();
                    var newData = []
                    for (var i = (exData.body.length - 1) ; i >= 0; i--) {

                        if ($(rowNodes[i]).css("display") == "none") {
                            continue;
                        }
                        newData[newData.length] = exData.body[i];

                    }
                    // the loop reverses order so put it back
                    exData.body = newData.reverse();

                }}]
        });

        // event handler for hiding and showing rows
        $("input[name='hideType']").on("click", function () {
            var c = $(this).val();
            var isChecked = $(this).prop('checked');
            $(aTable.rows('.type_' + c).nodes()).toggle(isChecked);
            aTable.rows().invalidate().draw();
        });

    });

Answer 2

jQuery hide() / show()的问题在于你需要调整你正在使用的dataTables的任何部分，如果你想伪造持久性＆＃34;隐藏＆＃34;行。

以下是一些插件方法，可以在dataTables中的行上提供真实 hide()和restore()：

$.fn.dataTableExt.hiddenRows = {};

$.fn.dataTable.Api.register( 'row.hide()', function(selector) {
  var row = this.row(selector);
  if (row.length == 0) return -1;
  var index = row.node()._DT_RowIndex;
  $.fn.dataTableExt.hiddenRows[index] = row.node().outerHTML;  
  row.remove().draw(false);
  return index;
});

$.fn.dataTable.Api.register( 'row.restore()', function(index) {
   var row = $.fn.dataTableExt.hiddenRows[index];
   if (row) {
     this.row.add( $(row) ).draw(false);
     delete $.fn.dataTableExt.hiddenRows[index];
     return true;
   }
   return false;
});

现在您有table.row.hide()和table.row.restore()。这些方法使用dataTables API，除了通过其唯一索引维护已删除行的列表之外什么都不做。演示可能如下所示：

var table = $('#example').DataTable({}) ;

$('#example').on('click', 'tbody tr', function() {
  var index = table.row.hide(this);
  var $button = $('<button></button>')
    .addClass('restore')
    .attr('index', index)
    .text('show #'+index);
  $('body').prepend($button);
})

$('body').on('click', '.restore', function() {
  var index = $(this).attr('index');
  table.row.restore(index);
  $(this).remove();
})

当你点击一行时，它被隐藏（即删除）;为每个隐藏的行生成一个恢复按钮。如果单击该按钮，则会恢复相应的行。

演示 - ＆gt;的 http://jsfiddle.net/s183ek2q/

jQuery的Datatables插件。如何隐藏行？导出到Excel仍显示隐藏的行

2 个答案: