0

Because fuelux is an extension of bootstrap, I first tried to add the 'table-striped' class to the table by targetting the table as a tag and I also tried grabbing the class of the table, which is .table:

$('table').addClass('table-striped');

neither worked, so I tried the full path used by fuelux:

$('.fuelux .repeater[data-viewtype="list"] .repeater-canvas .repeater-list table').addClass('table-striped');

No luck. The table it self is created dynamically by the fuelux script, so I'm not sure how to reference it.

Looking through the docs, it looks like list_columnRendered() function may help, but I'm not sure what to reference with it. I'm thinking I can use list_columnRendered(helpers.item) to target the table cells (td), but I think this would add inline styling, which I like to avoid if possible.

Preferably I would add the 'table-striped' class to the table tag. Is there a way to target js created tags?

BattlFrog
  • 3,370
  • 8
  • 56
  • 86

2 Answers2

0

I know this is an old question, but if you're still looking around for an answer to this, here's what I do. In your initialization call for the repeater you can specify a function to be run when the repeater renders its rows. You mentioned the column rendered function above (list_columnRendered). If you want to stripe the table like bootstrap does, you want to hook into the list_rowRendered event.

To do this, add the line below to your initialization of the repeater:

var repeaterReports = $("#reportList");    
repeaterReports.repeater({
            dataSource: getReportsData,
            list_noItemsHTML: "There are currently no reports to display.  If you performed a search you can clear the search using the x in the search box.",
            list_columnRendered: customColumnRendererReports,
            list_rowRendered: customRowRendererReports, // <--- you want this line.
            preserveDataSourceOptions: true
        });

Then the customRowRenderedReports function looks something like this:

 function customRowRendererReports(helpers, callback) {
        // add background color to every other row
        if (helpers.item[0].rowIndex % 2 == 0) {
            helpers.item.css('background-color', '#f9f9f9');
        }

        callback();
    }
Mike Devenney
  • 1,758
  • 1
  • 23
  • 42
  • Note that you might want to change the color that you use for row highlighting. I used the same color that bootstrap uses and that, in turn, is the same color that the repeater uses to highlight the row that is sorted (when a sort is applied). Not a big deal, but a heads up for you. – Mike Devenney Feb 04 '16 at 15:04
0

This will work

function dataSource (options, callback) { 
     /* add some data code here...*/   
     ...
     ...

     callback(dataSource);
     $('table').addClass('table-striped'); 
}

Just nestle it in the function datasouce and place at the end after the callback(dataSource). That way your table is initialized.

MattB
  • 1