button in columns

button in columns

Jonathan_16Jonathan_16 Posts: 8Questions: 0Answers: 0

Hello to all

I am adding some buttons in the columns of the table, but I have the inconvenience that when I fix the first two columns, it does not respect the space that it must maintain like the others so that they are not disordered.

I attach an image of the first two columns without fixed

And when I fix them this happens

As you can see the other columns are disordered because the fixed column does not preserve that white space.
How can I solve this? I appreciate your explanation and help.

Replies

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Are the buttons in the header as a second row?

    Please post a link to your page or a test case replicating the issue so we can help debug.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • Jonathan_16Jonathan_16 Posts: 8Questions: 0Answers: 0

    Use the following example: https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html

    It is a FixedHeader used with individual column filters, placed in a second row of the table header (using $().clone()).

    And I removed the text fields and put buttons.

    Well Kevin already sent you a link to my page.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Not sure where you sent the link to your page but it wasn't to me. Maybe to one of the developers?

    Are you using FixedColumns and FixedHeader?

    Kevin

  • Jonathan_16Jonathan_16 Posts: 8Questions: 0Answers: 0

    No, friend, I haven't sent it to you yet, because I haven't uploaded it.
    Yes, sir, I'm using both FixedColumns and FixedHeader.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    I'm using both FixedColumns and FixedHeader.

    They are incompatible to be used on the same table. The FixedHeader docs state this:

    Please note that FixedHeader is not currently compatible with tables that have the scrolling features of DataTables enabled (scrollX / scrollY). Please refer to the compatibility table for full compatibility details.

    Also see the Compatibility matrix.

    Using both is likely why the buttons in your FixedColumns is disappearing. Plus you will likely have other issues like header mis-alignment.

    Kevin

  • Jonathan_16Jonathan_16 Posts: 8Questions: 0Answers: 0

    Thanks friend, just leave the FixedColumns that is what I need, and I managed to upload a test case here I leave the link: http://live.datatables.net/vitoqoru/1/edit

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    FixedColumns clones the table in order to handle the fix columns. Build your second header before Datatables initialization. Also use orderCellsTop to move the sorting events to the top header. Like this:
    http://live.datatables.net/pugeluno/1/edit

    Kevin

  • Jonathan_16Jonathan_16 Posts: 8Questions: 0Answers: 0
    edited July 2021

    Friend it turns out that it does not work for me, look I am making the table with dynamic columns this is my code.

    <script>
         
     
             
             var columns = [];
                $(document).ready(function() {
    
                        $.ajax({
                          url: "consulta_table.php",
                          success: function (data) {
                            data = JSON.parse(data);
                            columnNames = Object.keys(data[0]);
                            for (var i in columnNames) {
                              columns.push({data: columnNames[i], 
                                        title: capitalizeFirstLetter(columnNames[i])});
                            }
                      
    
    
                            // Setup - add a text input to each footer cell
                            $('#example thead tr').clone(true).appendTo( '#example thead' );
                            $('#example thead tr:eq(1) th').each( function (i) {
                                var title = $(this).text();
                                $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
                         
                                $( 'input', this ).on( 'keyup change', function () {
                                    if ( table.column(i).search() !== this.value ) {
                                        table
                                            .column(i)
                                            .search( this.value )
                                            .draw();
                                    }
                                } );
                            } ); 
    
                            var table = $('#example').DataTable( {
                                orderCellsTop: true,
                                "searching": false,
                                "bLengthChange": false,
                                "deferRender": true,
                                "bFilter": false, 
                                "bInfo": false,
                                "createdRow":function(row,data,index){                   
                                   if(data["proyecto"] >= 0){
                                    $('td', row).css({
                                           'color':'black'
                                       });
                                   }
                               },
                                scrollY:        "700px",
                                scrollX:        true,
                                scrollCollapse: true,
                                paging:         false,
                                fixedColumns:   {
                                    leftColumns: 2
                                },
                                data: data,
                                columns: columns,
                            } );
                          }
    
                        });
    
                } );
                
                function capitalizeFirstLetter(string) {
                    return string.charAt(0).toUpperCase() + string.slice(1);
                }
    
     
     
     
        </script>
    
    

    I placed it where you told me and it does not show me the column, I placed it in several places but it does not show it, it only shows me the column in the location where I sent you the test case, ¿why does this happen?

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Around line 18 you will need to use jQuery or Javascript methods to create the first header based on the dynamic columns returned. That way line 21 will have a header row to clone from.

    Kevin

  • Jonathan_16Jonathan_16 Posts: 8Questions: 0Answers: 0

    Thanks my friend, I created the column as you told me and it works perfectly, I leave the code in case someone else needs it.

     var columns = [];
                $(document).ready(function() {
    
                        $.ajax({
                          url: "consulta_table.php",
                          success: function (data) {
                            data = JSON.parse(data);
                            columnNames = Object.keys(data[0]);
                            for (var i in columnNames) {
                              columns.push({data: columnNames[i], 
                                        title: capitalizeFirstLetter(columnNames[i])});
                            }
    
                            var table = document.createElement("thead");
                            var columnCount = columnNames.length;
                            var row = table.insertRow(-1);
                            for (var i = 0; i < columnCount; i++) {
                                var headerCell = document.createElement("th");
                                headerCell.innerHTML = columnNames[i];
                                row.appendChild(headerCell);
                            }
    
                            var dvTable = document.getElementById("example");
                            dvTable.innerHTML = "";
                            dvTable.appendChild(table);
    
                            $('#example thead tr').clone(true).appendTo( '#example thead' );
                            $('#example thead tr:eq(1) th').each( function (i) {
                            
                                if(i>=2){
                                    var title = $(this).text();
                                    $(this).html( '<button class="badge badge-light" style="text-aling: center" ><i class="fas fa-file-pdf"></i></button>' );
                             
                                    $( 'input', this ).on( 'keyup change', function () {
                                        if ( table.column(i).search() !== this.value ) {
                                            table
                                                .column(i)
                                                .search( this.value )
                                                .draw();
                                        }
                                    } );
                                }
                                                
                            } );
                            
                            var table = $('#example').DataTable( {
                                orderCellsTop: true,
                                "searching": false,
                                "bLengthChange": false,
                                "deferRender": true,
                                "bFilter": false, 
                                "bInfo": false,
                                "createdRow":function(row,data,index){                   
                                   if(data["proyecto"] >= 0){
                                    $('td', row).css({
                                           'color':'black'
                                       });
                                   }
                               },
                                scrollY:        "700px",
                                scrollX:        true,
                                scrollCollapse: true,
                                paging:         false,
                                fixedColumns:   {
                                    leftColumns: 2
                                },
                                data: data,
                                columns: columns
                            } );
    
                            
                          }
    
                        });
    
                } );
                
                function capitalizeFirstLetter(string) {
                    return string.charAt(0).toUpperCase() + string.slice(1);
                }
    
    
Sign In or Register to comment.