After hiding rows in a table, want to regresh pagination

quentinjs@gmail.com · February 2023

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

quentinjs@gmail.com · 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.

I have tried to trigger the pagination to update so the showing page is full again.
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

colin · February 2023

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

After hiding rows in a table, want to regresh pagination

After hiding rows in a table, want to regresh pagination

Answers

Howdy, Stranger!

Categories

DataTables

After hiding rows in a table, want to regresh pagination

After hiding rows in a table, want to regresh pagination

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables