row.visible() ?

row.visible() ?

johndyerjohndyer Posts: 2Questions: 1Answers: 0

I have a table of about 40 rows and I'd like to be able to enable the user to show/hide the columns and rows they want to see. Here's the older version not using DataTables: http://www.seminarycomparison.com/ and the new version with DataTables: http://www.seminarycomparison.com/datatables/ .

For columns, I can just do something like table.column(5).visible(false) to hide what I need, but there doesn't seem to be an equivalent table.row(2).visible(false).

I can use .filter to select the rows I want to show or hide, but I can't seem to find a way to set their visibility. I can try .search but it's looking for a string, not a list of which ones to show and hide.

Thanks!

Answers

  • jr42.gordonjr42.gordon Posts: 305Questions: 2Answers: 49

    So for column visibility, I would recommend using /buttons/column_visibility which allows end user column hide/show. If you wish to control the column visibility yourself, columns.visible.

    As far as the rows go, what is your criteria for hiding rows? Do you wish to hide rows via js or provide user ability to do this?

  • allanallan Posts: 63,133Questions: 1Answers: 10,399 Site admin

    You are correct - there is no row().visible() method. For that you have to use search (note not the filter() method - which filters an API result set, rather than actually filtering the table - that's termed "search" in DataTables).

    If the built in search options (search() and column().search()) don't do what you need, you can create a custom search plug-in.

    Allan

  • johndyerjohndyer Posts: 2Questions: 1Answers: 0

    Thanks @jr42.gordon. Yes, I'm custom building something very much like the /buttons/column_visibility plugin.

    @allan, thanks again for a fantastic library. I had tried the search() API, but wasn't having much luck. However, the custom search plug-in approach worked for me.

    The end result looks something like this.

        // custom search based on checkboxes
        $.fn.dataTable.ext.search.push(
            function( settings, searchData, index, rowData, counter ) {
                var checkedIds = [];            
                $('.my-list input:checked').each(function() {           
                    checkedIds.push( $(this).val() );               
                });  
                                    
                return checkedIds.indexOf(rowData[0]) > -1 ? true : false;          
            }
        );          
    
This discussion has been closed.