After hiding rows in a table, want to regresh pagination

After hiding rows in a table, want to regresh pagination

quentinjs@gmail.comquentinjs@gmail.com Posts: 2Questions: 1Answers: 0

Link to test case:
Debugger code (dIebug.datatables.net):
Error messages shown:
Description of problem:

Answers

  • quentinjs@gmail.comquentinjs@gmail.com Posts: 2Questions: 1Answers: 0
    edited February 2023

    Client Side. I have the below code to add GroupRows to a table. When the button next to each is pressed, the section hides.

    1. I have tried to trigger the pagination to update so the showing page is full again.
    2. I can not get the button to show the arrows properly.

    Sorry for the length

    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.2/css/jquery.dataTables.min.css"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.3.4/css/buttons.dataTables.min.css"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.3.1/css/fixedHeader.dataTables.min.css"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowgroup/1.3.0/css/rowGroup.dataTables.min.css"/>
    
    
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js"></script>
        
        <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.3.4/js/dataTables.buttons.min.js"></script>
        
        <script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.3.1/js/dataTables.fixedHeader.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.3.0/js/dataTables.rowGroup.min.js"></script>
        
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax    
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-tOJzKIHQG0B/ZL8+7oCsfv+AWV7y5JXDT+wlKZ5Mx14wP7pGh5E8WbGpLjJr1r3CtTwto8W2nKro+RwRJowZPw==" crossorigin="anonymous" referrerpolicy="no-referrer" />    
        
        
    
        
    
        <style>       
            div.container {
                width: 80%;
               }
               
            .group-header {
                margin-right: 5px;
                background-color: #ddd !important;
            }
            
            .hhide-button {
                border: 1;
                background-color: transparent;
                color: #007bff;
                font-size: 26px;
                cursor: pointer;
            }
            
            .hhide-button:after {
                content: "93";
                display: inline-block;
                margin-left: 5px;
            }
        
            .display {
                width: 80%;
            }
                
            .no-header:nth-child(1) {
               display:none;
               }          
        </style>
        
    
        <script>
            $(document).ready(function() {
                var table = $('#myTable').DataTable({
                    paging: true,
                    pageLength: 20,
                    
                    orderFixed: [[0, 'asc']],
                    searching: false,                
                    columnDefs: [{
                        targets: [0],
                        visible: true,
                        className: 'group-header'
                    }, {
                        targets: '_all',
                        className: 'no-header'
                    }],
                    
                    drawCallback: function(settings) {
                        var api = this.api();
                        var rows = api.rows({ page: 'current' }).nodes();
                        var last = null;
    
                        api.column(0, { page: 'current' }).data().each(function(group, i) {
                            if (last !== group) {
                                $(rows).eq(i).before('<tr class="group-header"><td colspan="' + api.columns().nodes().length + '">' + group + '<button class="hide-button"><i class="fa-solid fa-chevron-down" style="cursor: pointer;"></i></button></td></tr>');
                                last = group;
                            }
                        });
    
                        // Add event listener to hide button
                        $('.hide-button').on('click', function() {
                            $(this).closest('tr.group-header').nextUntil('tr.group-header').toggle();
    
                            $(this).find('.fa-solid').toggleClass('fa-chevron-down fa-chevron-up');
    
                            // Update the table pagination based on the number of rows shown
                            
                            var shownRows = $('tr[style*="display: table-row;"]').length;
                            table.page.len(shownRows).draw();                        
    
                            // Redraw the table with the new visibility
                            table.draw();
                        });                                        
                    }
                    
                    
                });
    
    
                // Update the number of visible rows on page length change
                $('#myTable').on('length.dt', function(e, settings, len) {
                    // Set the page length to the selected value
                    table.page.len(len);
                    
                    // Redraw the table with the new page length
                    table.draw('page');
                });
    
            });
        </script>
        
    
    </head>
    <body>
            <table class="dataframe no-header display style="width=100%;"" id="myTable">
      <thead>
        <tr style="text-align: right;">
          <th>stats</th>
          <th>Column 1</th>
          <th>Column 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>A</td>
          <td>35</td>
          <td>158</td>
        </tr>
        <tr>
          <td>M</td>
          <td>97</td>
          <td>188</td>
        </tr>
        <tr>
          <td>B</td>
          <td>30</td>
          <td>121</td>
        </tr>
        <tr>
          <td>B</td>
          <td>36</td>
          <td>185</td>
        </tr>
        <tr>
          <td>A</td>
          <td>14</td>
          <td>152</td>
        </tr>
        <tr>
          <td>M</td>
          <td>61</td>
          <td>189</td>
        </tr>
        <tr>
          <td>G</td>
          <td>93</td>
          <td>120</td>
        </tr>
        <tr>
          <td>M</td>
          <td>7</td>
          <td>102</td>
        </tr>
        <tr>
          <td>B</td>
          <td>46</td>
          <td>143</td>
        </tr>
        <tr>
          <td>L</td>
          <td>29</td>
          <td>177</td>
        </tr>
        <tr>
          <td>J</td>
          <td>65</td>
          <td>160</td>
        </tr>
        <tr>
          <td>B</td>
          <td>61</td>
          <td>182</td>
        </tr>
        <tr>
          <td>A</td>
          <td>85</td>
          <td>110</td>
        </tr>
        <tr>
          <td>A</td>
          <td>73</td>
          <td>132</td>
        </tr>
        <tr>
          <td>D</td>
          <td>42</td>
          <td>135</td>
        </tr>
        <tr>
          <td>A</td>
          <td>4</td>
          <td>143</td>
        </tr>
        <tr>
          <td>M</td>
          <td>60</td>
          <td>152</td>
        </tr>
        <tr>
          <td>H</td>
          <td>67</td>
          <td>146</td>
        </tr>
        <tr>
          <td>B</td>
          <td>91</td>
          <td>108</td>
        </tr>
        <tr>
          <td>J</td>
          <td>53</td>
          <td>189</td>
        </tr>
        <tr>
          <td>E</td>
          <td>90</td>
          <td>126</td>
        </tr>
        <tr>
          <td>C</td>
          <td>33</td>
          <td>118</td>
        </tr>
        <tr>
          <td>A</td>
          <td>59</td>
          <td>100</td>
        </tr>
        <tr>
          <td>G</td>
          <td>82</td>
          <td>115</td>
        </tr>
        <tr>
          <td>L</td>
          <td>48</td>
          <td>128</td>
        </tr>
        <tr>
          <td>F</td>
          <td>44</td>
          <td>178</td>
        </tr>
        <tr>
          <td>B</td>
          <td>61</td>
          <td>110</td>
        </tr>
        <tr>
          <td>K</td>
          <td>16</td>
          <td>131</td>
        </tr>
        <tr>
          <td>G</td>
          <td>11</td>
          <td>131</td>
        </tr>
      </tbody>
    </table>
    </body>
    </html>
    

    Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    DataTables doesn't have a concept of hiding rows - either the rows are there, or they aren't. You're working around this by hiding the rows with CSS classes, but the rows are still within the DataTables internal structures - that means the pagination won't consider that, those rows will always be displayed albeit displayed hidden, so a redraw won't solve anything.

    An alternative approach would be to delete the rows from the table, instead of hiding them - that way the pagination would redraw as you require. If you get the row's data first, you can then re-add those rows with that data later. You would use rows().remove() (or row().remove() to individually remove them), rows().data() to get the data, and rows.add() to re-add the records,

    Colin

Sign In or Register to comment.