[Resolved] Hide the column of the table

[Author]

Posts

[deepS]

I am using the table format to generate the view of the RFG. In some cases, there might be possibilities where there is no data in a particular custom field. Then how to hide the entire column in those situations? Please help.

[Minesh]

Hello. Thank you for contacting the Toolset support.

Actually, there is no easy way to hide the whole column as we will be able to know that the whole table column is empty once the whole loop runs, that means at the end of the loop.

so, the easiest way would be for you to add some custom JS/jQuery code to find the columns with empty content and hide them. Please check the following reference links that may help you:
=> https://stackoverflow.com/questions/5172454/remove-hide-tables-empty-columns-including-th/5172480
=> hidden link
=> https://stackoverflow.com/questions/9003335/hiding-a-table-column-if-the-containing-cells-are-empty-with-jquery

[deepS]

Thanks for your reply.
Since I am a layman in JS/jQuery code I couldn't do what I am intending for. I am submitting my table code generated out of RFGs:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<table id="exampaper" width="100%">
      <thead><tr>
               	<th>Name of the Paper</th>
               	<th>Description</th>
        		<th>Nature of the Paper</th>
        		<th>Nos. of Questions</th>
        		<th>Question Type</th>
        		<th>Marks</th>
        		<th>Duration</th>
        		<th>Negative Marking</th>
            </tr></thead>
		<tbody class="wpv-loop js-wpv-loop">
		<wpv-loop>
			<tr>
				<td>[types field="exam-paper-name"][/types][wpv-conditional if="( $(wpcf-exam-paper-name-alias) ne '' )"]: [types field="exam-paper-name-alias"][/types][/wpv-conditional]</td>
				[wpv-conditional if="( $(wpcf-exam-paper-description) ne '' )"]<td>[types field="exam-paper-description"][/types]</td>[/wpv-conditional]
              	<td>[types field="exam-paper-nature"][/types]</td>
              	<td>[types field="no-of-questions"][/types]</td>
              	<td>[types field="type-of-questions"][/types]</td>
				<td>[types field="exam-paper-mark"][/types]</td>
				<td>[types field="exam-duration"][/types] hrs</td>
              	<td>[wpv-conditional if="( $(wpcf-exam-paper-negative-marking) eq '1' )"] [types field="negative-marking-details"][/types][/wpv-conditional]</td>
			</tr>
		</wpv-loop>
		</tbody>
	</table>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

The codes (mentioned by you) were are part of the example and may or may not be fit for my Table. It would be of great help to me if you could polish the codes so that I can utilize them on mine. Thanks in advance.

[Minesh]

I need a problem URL where you added your view and would like to know what column you want to hide/remove when empty.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Can you please check now: hidden link
- I can see now empty columns are removed 🙂

I've adjusted the JS code within the JS editor of your view as given under:
=> hidden link

jQuery(document).ready(function($) {
    hideEmptyCols();


function hideEmptyCols(table) {
    //count # of columns
    jQuery('table').each(function(a, tbl) {
    var currentTableRows = $(this).find("tr").length - 1;
    $(tbl).find('th').each(function(i) {
        var removeVal = 0;
        var currentTable = $(this).parents('table');

        var tds = currentTable.find('tr td:nth-child(' + (i + 1) + ')');
        tds.each(function(j) { if ($(this).text().trim() == '') removeVal++; });
        
        if (removeVal == currentTableRows) {
            $(this).hide();
            tds.hide();
        }
    });
});
    
}
  
  });

[deepS]

Here I would like to point out something:
Regarding Description column
1. The table content might have hidden partially. You can see that in Row 1 I have put some data and it's showing correctly but in Row 2 where I haven't put any data it drags the value from the next column i.e 'Nature of Paper'. I want it in this way(see the Screenshot_1)
2. Even if there is no data in the entire column the column header stays in the table. I want the entire column to disappear including the Header.

Regarding Negative marking column
Same logic as above.

Hope I can make you understand my points. Thanks.

[Minesh]

Hello Deeps,

The solution I shared you can use it as example as the help you are asking is belongs to custom code which is beyond the scope of our support policy. However - I still able to show you the example and shared the working code, now based on that example you should modify the JS code as per your requirement or take help from Pro JS developer.

If you need custom programming for your project, you are welcome to call any our certified partners:
=> https://toolset.com/contractors/

[deepS]

I understand that such assistance would be out of your purview, but hope, extending such small help will make you a big offender. Anyways Thanks.