4

我花了两天时间寻找一个关于如何通过 javascript 隐藏 jQuery dataTables 中的空列的好解决方案，所以我找到了自己的解决方案，编写了一个新插件，我认为这将帮助其他人快速完成，如果你发现这个插件有用的话随意扩展它并发布您的代码以帮助其他人改进他们的数据表。

$.fn.dataTableExt.oApi.fnHideEmptyColumns = function ( oSettings, tableObject )
{ 
    /**
     * This plugin hides the columns that are empty.
     * If you are using datatable inside jquery tabs
     * you have to add manually this piece of code
     * in the tabs initialization
     * $("#mytable").datatables().fnAdjustColumnSizing();
     * where #mytable is the selector of table 
     * object pointing to this plugin.
     * This plugin should only be invoked from 
     * fnInitComplete callback.
     * @author John Diaz
     * @version 1.0
     * @date 06/28/2013
     */
    var selector = tableObject.selector; 
    var columnsToHide = [];

    $(selector).find('th').each(function(i) {

        var columnIndex = $(this).index(); 
        var rows = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')'); //Find all rows of each column  
        var rowsLength = $(rows).length;
        var emptyRows = 0; 

        rows.each(function(r) { 
            if (this.innerHTML == '') 
                emptyRows++; 
        });  

        if(emptyRows == rowsLength) { 
            columnsToHide.push(columnIndex);  //If all rows in the colmun are empty, add index to array
        }  
    }); 
    for(var i=0; i< columnsToHide.length; i++) {
        tableObject.fnSetColumnVis( columnsToHide[i], false ); //Hide columns by index
    }
    /**
     * The following line doesn't work when the plugin 
     * is used inside jquery tabs, then you should
     * add manually this piece of code inside
     * the tabs initialization where ("#myTable") is 
     * your table id selector 
     * ej: $("#myTable").dataTable().fnAdjustColumnSizing();
     */

    tableObject.fnAdjustColumnSizing();
}

插件调用：

"fnInitComplete": function () { 
    /**
     * Go to plugin definition for
     * instructions on how to use.
     */ 
    this.fnHideEmptyColumns(this);
}

如果您对代码有一些观察，请保持礼貌，这不是关于如何隐藏 jQuery dataTables 插件的空列的最后一句话。

4

4 回答 4

6

在找到一些解决问题的代码之前，我尝试了很多解决方案——我使用带有“api”变量的“fnDrawCallback”来访问 columns() 函数。我还想将表格中的第一列保留为空，因为我使用了一些 CSS 来更改表格的外观。

   $(document).ready(function(){
table = $("#tableofproducts").DataTable({
                "dom": '<"top"<"left"l>pf<"clear">>rt<"bottom"ip<"clear">>',
                "oLanguage": {
                    "sSearch": "Search in table"
                },
                responsive: true,
                "processing": true,
                'ajax': {
                    'url': '<%=ResolveUrl("~/GenericHendler/SearchResultHandler.ashx")%>'
                },
                "fnDrawCallback": function () {
                    $("#loading").hide();
                    var api = this.api();
                    setTimeout( function () {
                        api.columns().flatten().each(function (colIdx) {
                            var columnData = api.columns(colIdx).data().join('');
                            if (columnData.length == (api.rows().count() - 1) && colIdx != 0) {
                                api.column(colIdx).visible(false);
                            }
                        });
                    },0)
                }
            });
})
于 2018-01-23T11:08:48.497 回答
0

对于在搜索解决方案时遇到此问题的任何人，有一个相当新的 DataTables 插件，它可以满足您的需求，并且比您的功能更可定制。

您可以通过在创建时添加 hideEmptyCols 选项来简单地激活它DataTable

$('#example-1').DataTable({
    hideEmptyCols: true
});

有关完整的选项集，请查看插件 Github页面。不过，对于某些用例，这里可能需要$("#example-1").DataTables().fnAdjustColumnSizing();手动调用，因为当其他用例被隐藏时，列会变得更宽。

于 2016-08-28T15:46:42.897 回答
0

如果有人在此寻找解决方案，我们找到了不同的路线。

我们开始研究这个是因为我们有数据组，其中的标题基本上是一个空行而不是标题。它基本上从静态表开始发展了一段时间，让它增长一两个月，而不是稍后添加排序/搜索功能。因此，当我们按字母顺序排序时，组标题或标题处理不当。

我们最终是通过使用 RowGroup 扩展来替换空列的需要：https ://datatables.net/extensions/rowgroup/examples/initialisation/simple.html

虽然我确定这不适用于搜索此内容的每个人，但我希望它对将来从谷歌登陆这里的人有所帮助。

于 2019-12-23T16:35:58.630 回答
0

这是处理这个问题的一种方法吗？基于一次抓取所有列，并过滤行为空的位置。如果全部为空，则隐藏该列。

可以添加到您编写的函数中。喜欢试试速度测试。

//get how many columns there are
var columnCount = $('yourTable tr:first > td').length;

for(var x=0;x<columnCount;x++){
    var $columnRows = $("yourTable tbody td:nth-child(" + x + ")");
    if($columnRows.length < 0)
    {
        var $filteredRows = $columnRows.filter(function() { return $(this).html() != ""; } //only return rows where this column value is not empty
        if($filterdRows.length < 1)
        {
            $("yourTable tr td:nth-child(x)");    
        }

    }
}

请告诉我你的想法。

于 2015-10-17T01:59:16.090 回答