User:JP/common.js

Note: After saving, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.

 var tfConfig = {
        base_path: 'tablefilter/',
        alternate_rows: true,
        btn_reset: true,
        rows_counter: true,
        loader: true,
        status_bar: true,
        paging: true,
        col_0: 'select',
        col_1: 'select',
        col_2: 'select',
        extensions:[{
            name: 'sort',
            types: [
                'string', 'string', 'number',
                'number', 'number', 'number',
                'number', 'number', 'number'
            ]
        }]
    };
    var tf = new TableFilter(document.querySelector('#demo'), tfConfig);

    // Subscribe to events
    // Format cell at initialization
    tf.emitter.on(['initialized'], parseRows);
    // Format cell upon filtering
    tf.emitter.on(['cell-processed'], formatCell);

    tf.init();

    // Process all rows on start-up
    function parseRows(tf){
        var cellIndex = 3; // POP column
        var rowsIdx = tf.getValidRows();
        rowsIdx.forEach(function(idx){
            var row = tf.tbl.rows[idx];
            var cell = row.cells[cellIndex];
            formatCell(tf, cellIndex, cell);
        });
    }

    // Format passed cell with custom logic
    function formatCell(tf, cellIndex, cell){
        if(cellIndex !== 3){
            return;
        }
        var cellData = parseInt(cell.innerHTML, 10);

        // some rows do not contain a numeric value
        if(isNaN(cellData)){
            return;
        }

        if(cellData >= 100000){
            cell.style.backgroundColor = '#ff0000';
        } else if(cellData < 100000 && cellData >= 50000) {
            cell.style.backgroundColor = '#3399ff';
        } else {
            cell.style.backgroundColor = '#cfff33';
        }
    }