在jquery dataTable中隐藏空列的最佳方法

guykilcj 于 2022-12-18 发布在 jQuery

关注(0)|答案(5)|浏览(164)

我花了两天时间寻找如何通过JavaScript在jQuery dataTables中隐藏空列的好解决方案，所以我找到了自己的解决方案，编写了一个新的插件，我认为这将帮助其他人很快做到这一点，如果你觉得这个插件有用，随时扩展它，并发布您的代码，以帮助其他人改善他们的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插件的空列的最后一句话。

jquery

来源：https://stackoverflow.com/questions/18000499/the-best-way-to-hide-empty-columns-in-jquery-datatable

5条答案

按热度按时间

u2nhd7ah1#

我尝试了很多解决方案，然后找到了一些代码来解决这个问题-我使用带有“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)
                }
            });
})

赞(0）回复(0）举报 2022-12-18

wwtsj6pe2#

这是一种处理方法吗？基于一次获取所有列，并过滤行为空的位置。如果所有列都为空，则隐藏该列。
可以添加到你写的函数中。想试试速度测试。

//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)");    
        }

    }
}

请告诉我你的想法。

赞(0）回复(0）举报 2022-12-18

omqzjyyz3#

对于那些在寻找解决方案时偶然发现这一点的人来说，最近有一个用于DataTables的插件，它可以做你想做的事情，而且比你的函数更容易定制。
您只需在创建DataTable时添加hideEmptyCols选项即可将其激活

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

查看Plugin Github页面可以获得完整的选项集，不过，在某些用例中可能需要手动调用$("#example-1").DataTables().fnAdjustColumnSizing();，因为当其他列被隐藏时，列会变得更宽。

赞(0）回复(0）举报 2022-12-18

wvyml7n54#

如果有人在寻找解决方案时落在这上面，我们找到了一条不同的路线。
我们开始研究这个问题是因为我们有数据组，其中的标题基本上是一个空行而不是标题。它基本上是从一个静态表开始的，让它增长一个月或两个月，然后再添加排序/搜索功能。因此，当我们按字母顺序排序时，组标题或标题不能正确处理。
最后我们使用RowGroup扩展来替换空列：https://datatables.net/extensions/rowgroup/examples/initialisation/simple.html
虽然我确信这并不适用于每个搜索这个的人，但我希望它能帮助那些将来从谷歌登陆这里的人。

赞(0）回复(0）举报 2022-12-18

8gsdolmq5#

我想到了这个。在初始化过程中将其添加为DataTable选项。您可以将空['0', '-', ' ', '']的检查更改为任何字符。

initComplete: function (settings, json) {
    const api = this.api();
    api.columns().every( function (index) {
        const isEmpty = this.data().map(x => ['0', '-', ' ', ''].includes(x) ? "" : x).join('') === '';
        if (isEmpty) {
            api.columns(index).visible(false)
        }
    } );
},

赞(0）回复(0）举报 2022-12-18

我来回答

在jquery dataTable中隐藏空列的最佳方法

5条答案

相关问题

热门标签

最新问答