我想在 UI 中只向用户显示 3 列，但想将所有表数据导出到 excel，那么如何根据 header 文本隐藏列？

Question

This is My Table, I want to show only First 3 columns to User but i want to export All data to Excel. First how Can I hide the Columns based on the Header text?

<table id="ibms" class="table table-bordered">

                              <thead>    
                                <tr>                      
                                  <th>IBMS Code</th>
                                  <th>Location Description</th>
                                  <th>FMS Location Code</th>
                                  <th>FMS Location Description</th>
                                  <th>Site</th>
                                  <th>Level</th>
                                  <th>Area</th>
                                  <th>Zone</th>
                                  <th>Unit</th>
                                  <th>Location</th>
                              </tr>
                          </thead> 
           
                             <tbody>
    
                            <tr><td>IB-0078</td>
                                  <td>Hello</td>
                                  <td>542</td>
                                  <td>Description here</td>
                                  <td>Industry</td>
                                  <td>1</td>
                                  <td>Arizona</td>
                                  <td>five</td>
                                  <td>2</td>
                                  <td>USA</td>
                               </tr>
                               <tr>
                               <td>IB-552</td>
                                  <td>World</td>
                                  <td>576</td>
                                  <td>Description here</td>
                                  <td>Textile</td>
                                  <td>2</td>
                                  <td>Texas</td>
                                  <td>one</td>
                                  <td>10</td>
                                  <td>USA</td>
                             </tr>
                             </tbody>
                            </table>
    
    
             

JS code:
var hidecolumns = $("#ibms").DataTable();

        function locationhie(hidecolumns){       
                    
                            var u = $("th:contains(FMS Location Description)").index();
                            hidecolumns.column(u).visible( false );
                        }
        function locationhieSite(hidecolumns){       
                    
                            var a = $("th:contains(Site)").index();
                            hidecolumns.column(a).visible( false );
                        }
        function locationhielevel(hidecolumns){       
                    
                            var b = $("th:contains(Level)").index();
                            hidecolumns.column(b).visible( false );
                        }
        function locationhieArea(hidecolumns){       
                    
                            var c = $("th:contains(Area)").index();
                            hidecolumns.column(c).visible( false );
                        }
        function locationhieZone(hidecolumns){       
                    
                            var d = $("th:contains(Zone)").index();
                            hidecolumns.column(d).visible( false );
                        }
        function locationhieUnit(hidecolumns){       
                    
                            var e = $("th:contains(Unit)").index();
                            hidecolumns.column(e).visible( false );
                        }
        function locationhieLocation(hidecolumns){       
                    
                            var f = $("th:contains(Location)").index();
                            hidecolumns.column(f).visible( false );
                        }

Can Anyone help me how to Achieve this? Is there any alternative solutions available to do this in a single function?

Answer 1

You can use CSS :nth-child pseudo-class selector to hide some columns, no JS needed:

 .locations td:nth-child(n+4), .locations th:nth-child(n+4) { display: none; }

 <table id="ibms" class="table table-bordered locations"> <thead> <tr> <th>IBMS Code</th> <th>Location Description</th> <th>FMS Location Code</th> <th>FMS Location Description</th> <th>Site</th> <th>Level</th> <th>Area</th> <th>Zone</th> <th>Unit</th> <th>Location</th> </tr> </thead> <tbody> <tr> <td>IB-0078</td> <td>Hello</td> <td>542</td> <td>Description here</td> <td>Industry</td> <td>1</td> <td>Arizona</td> <td>five</td> <td>2</td> <td>USA</td> </tr> <tr> <td>IB-552</td> <td>World</td> <td>576</td> <td>Description here</td> <td>Textile</td> <td>2</td> <td>Texas</td> <td>one</td> <td>10</td> <td>USA</td> </tr> </tbody> </table>

.locations td:nth-child(n+4) selects any td element within an element of .locations class starting from the index of 4. Indices are calculated from the first occurence of td in its parent, and the first index is 1.