Printing Row Numbers

Printing Row Numbers

Goober28Goober28 Posts: 2Questions: 1Answers: 0

Hi - I'm very new to dataTables and fairly new to JqUi....Anyway, I have a table that implements the "row counter" example on this site. It works great when sorting/searching the table. However, I also am using the "Print" table button extension. The Print works fine (it maintains the search and sort results), but it doesn't display the "row counter" values. The column heading is there, but not the values.

Thanks! I really appreciate any help....using IE 11

        var myTable = $('#mainTable').DataTable({
            dom: 'Bfrtip', 
            /*
            B - Buttons, 
            f - filtering input
            r - processing display element
            t - table
            i - informational panel
            p - pagination control
            l - "show" drop down (not being used now)
            */
            buttons: [{
                extend: 'print',
                text: 'Printer Friendly List',
                autoPrint: false,
                exportOptions: {
                    columns: ':visible'
                }
            },{ 
                extend: 'colvis',
                text: 'Select Columns',
            }
            ],
            columnDefs: [
                { visible: false, targets: -1},
                { visible: false, targets: -2},
                { visible: false, targets: -3},
                { visible: false, targets: -4},
                { visible: false, targets: -5},
                { visible: false, targets: -6},
                { visible: false, targets: -7},
                { visible: false, targets: -8},
                { visible: false, targets: -9},
                { searchable: false, orderable: false, targets: 0 }
            ], 
            "pageLength": 25
        });
       myTable.on('order.dt search.dt', function () {
          myTable.column(1, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
              cell.innerHTML = i + 1;
            });   
        })

Answers

  • Goober28Goober28 Posts: 2Questions: 1Answers: 0

    Unable to get this to work, but via CSS I was able to print the row numbers
    by adding a class to my table:

    customize: function (win) {
                       $(win.document.body).find('table').addClass('printer')
                       
    

    part of my css:

    .printer table{
        counter-reset: rowNumber;
    }
    
    .printer tr {
        counter-increment: rowNumber;
    }
    
    .printer tr td:first-child::before {
        content: counter(rowNumber);
        min-width: 1em;
        margin-right: 0.5em;
    }
    
This discussion has been closed.