File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
​
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta content="width=device-width, initial-scale=1" name="viewport">
        <meta content="2023-09-11 21:09:02" name="revised">
        <title></title>
        <link rel="stylesheet preload prefetch" href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" type="text/css" as="style" />
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js" type="text/javascript" comment="jquery"></script>
        <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js" type="text/javascript"></script>
        <link rel="stylesheet preload prefetch" href="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.min.css" type="text/css" as="style" />
        <link rel="stylesheet preload prefetch" href="https://cdn.datatables.net/select/1.7.0/css/select.dataTables.min.css" type="text/css" as="style" />
        <script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js" type="text/javascript"></script>
        <script src="https://cdn.datatables.net/select/1.7.0/js/dataTables.select.min.js" type="text/javascript"></script>
        <script src="https://cdn.datatables.net/plug-ins/1.13.5/sorting/datetime-moment.js" type="text/javascript"></script>
        <link rel="stylesheet preload prefetch" href="https://cdn.datatables.net/buttons/2.4.0/css/buttons.dataTables.min.css" type="text/css" as="style" />
        <script src="https://cdn.datatables.net/buttons/2.4.0/js/dataTables.buttons.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js" type="text/javascript"></script>
        <script src="https://cdn.datatables.net/buttons/2.4.0/js/buttons.html5.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js" type="text/javascript"></script>
        <link rel="stylesheet preload prefetch" href="https://cdn.datatables.net/datetime/1.5.0/css/dataTables.dateTime.min.css" type="text/css" as="style" />
        <script src="https://cdn.datatables.net/datetime/1.5.0/js/dataTables.dateTime.min.js" type="text/javascript"></script>
        <script>
​
            /*! © Drijkoningen Dirk - datatables.net/license */
​
            (function (factory) {
                if (typeof define === 'function' && define.amd) {
                    // AMD
                    define(['jquery', 'datatables.net'], function ($) {
                        return factory($, window, document);
                    });
                }
                else if (typeof exports === 'object') {
                    // CommonJS
                    var jq = require('jquery');
                    var cjsRequires = function (root, $) {
                        if (!$.fn.dataTable) {
                            require('datatables.net')(root, $);
                        }
                    };
​
                    if (typeof window === 'undefined') {
                        module.exports = function (root, $) {
                            if (!root) {
                                // CommonJS environments without a window global must pass a
                                // root. This will give an error otherwise
                                root = window;
                            }
​
                            if (!$) {
                                $ = jq(root);
                            }
​
                            cjsRequires(root, $);
                            return factory($, root, root.document);
                        };
                    }
                    else {
                        cjsRequires(window, jq);
                        module.exports = factory(jq, window, window.document);
                    }
                }
                else {
                    // Browser
                    factory(jQuery, window, document);
                }
            }(function ($, window, document, undefined) {
                'use strict';
                var DataTable = $.fn.dataTable;
​
​
                /**
                 * This data rendering helper method will convert percentage values into a bar.
                 * Values can either have the % sign or not and decimals get rounded to the
                 * given value. The percentage will have a max value of 100%.
                 *
                 * This function should be used with the `dt-init columns.render` configuration
                 * option of DataTables.
                 *
                 * v1.1 Changelog
                 * - Added a seventh border type parameter.
                 * - All parameters are now optional.
                 * - Improved styling.
                 * - Bug fix: Text is always centered now.
                 *
                 * It accepts seven parameters:
                 *
                 * 1. `-type string` square as default or round for a rounded bar.
                 * 2. `-type string` A hex color for the text.
                 * 3. `-type string` A hex color for the border.
                 * 4. `-type string` A hex color for the bar.
                 * 5. `-type string` A hex color for the background.
                 * 6. `-type integer` A number used to round the value.
                 * 7. `-type string` A border style, default=ridge (solid, outset, groove, ridge)
                 *
                 *  DEMO : http://codepen.io/RedJokingInn/pen/jrkZQN
                 *
                 *  @name percentBar
                 *  @summary Display percentage value as a bar
                 *  @author [Drijkoningen Dirk](RedJokingInn)
                 *  @requires DataTables 1.10+
                 *
                 *  @returns {String} Html code for bar
                 *
                 *  @example
                 *    // Display rounded bars with white text, medium blue border, light blue bar, dark blue background, rounded to one decimal.
                 *    $('#example').DataTable( {
                 *      columnDefs: [ {
                 *        targets: 4,
                 *        render: DataTable.render.percentBar( 'round','#FFF', '#269ABC', '#31B0D5', '#286090', 1, 'groove' )
                 *      } ]
                 *    } );
                 *
                 *  @example
                 *    // All default values used. Square bars with black text, gray ridged border, light green bar, light gray background, rounded to integer.
                 *    $('#example').DataTable( {
                 *      columnDefs: [ {
                 *        targets: 2,
                 *        render: DataTable.render.percentBar()
                 *      } ]
                 *    } );
                 */
                DataTable.render.percentBar = function (pShape, cText, cBorder, cBar, cBack, vRound, bType, conditionalColors) {
                    pShape = pShape || 'square';
                    cText = cText || '#000';
                    cBorder = cBorder || '#BCBCBC';
                    cBar = cBar || '#5FD868';
                    cBack = cBack || '#E6E6E6';
                    vRound = vRound || 0;
                    bType = bType || 'ridge';
                    //Bar templates
                    var styleRule1 = 'max-width:100px;height:12px;margin:0 auto;';
​
                    return function (d, type, row) {
                        //Remove % if found in the value
                        //Round to the given parameter vRound
                        var s = parseFloat(d.toString().replace(/\s%|%/g, '')).toFixed(vRound);
                        //Not allowed to go over 100%
                        if (s > 100) {
                            s = 100;
                        }
                        // Order, search and type gets numbers
                        if (type !== 'display') {
                            return s;
                        }
                        if (typeof d !== 'number' && typeof d !== 'string') {
                            return d;
                        }
​
                        var cBackConditional;
                        var cBarConditional;
                        var cTextConditional;
                        // do conditional colors based on user input
                        if (conditionalColors) {
                            for (var i = 0; i < conditionalColors.length; i++) {
                                if (s >= conditionalColors[i].min && s <= conditionalColors[i].max) {
                                    if (conditionalColors[i].barColor) {
                                        cBarConditional = conditionalColors[i].barColor;
                                    } else {
                                        cBarConditional = cBar;
                                    }
                                    if (conditionalColors[i].backgroundColor) {
                                        cBackConditional = conditionalColors[i].backgroundColor;
                                    } else {
                                        cBackConditional = cBack;
                                    }
                                    if (conditionalColors[i].textColor) {
                                        cTextConditional = conditionalColors[i].textColor;
                                    } else {
                                        cTextConditional = cText;
                                    }
                                    break;
                                }
                            }
                        } else {
                            cBackConditional = cBack;
                            cBarConditional = cBar;
                            cTextConditional = cText;
                        }
                        var styleRule2 = 'border:2px ' +
                            bType +
                            ' ' +
                            cBorder +
                            ';line-height:12px;font-size:14px;color:' +
                            cText +
                            ';background:' +
                            cBackConditional +
                            ';position:relative;';
                        //Bar template
                        var styleRule3 = 'height:12px;line-height:12px;text-align:center;background-color:' +
                            cBarConditional + ';padding:auto 6px;';
                        //Square is default, make template round if pShape == round
                        if (pShape == 'round') {
                            styleRule2 += 'border-radius:5px;';
                            styleRule3 += 'border-top-left-radius:4px;border-bottom-left-radius:4px;';
                        }
                        //Return the code for the bar
                        return ('<div style="' +
                            styleRule1 +
                            '"><div style="' +
                            styleRule2 +
                            '"><div style="' +
                            styleRule3 +
                            'width:' +
                            s +
                            '%;"></div><div style="width:100%;text-align:center;position:absolute;left:0;top:0;">' +
                            s +
                            '%</div></div></div>');
                    };
                };
​
​
                return DataTable;
            }));
​
​
​
        </script>
        <link rel="stylesheet preload prefetch" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css" type="text/css" as="style" />
        <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js" type="text/javascript"></script>
        <link rel="stylesheet preload prefetch" href="https://cdn.datatables.net/plug-ins/1.13.1/features/alphabetSearch/dataTables.alphabetSearch.css" type="text/css" as="style" />
        <script src="https://cdn.datatables.net/plug-ins/1.13.1/features/alphabetSearch/dataTables.alphabetSearch.js" type="text/javascript"></script>
        <link rel="stylesheet preload prefetch" href="https://cdn.datatables.net/searchbuilder/1.5.0/css/searchBuilder.dataTables.min.css" type="text/css" as="style" />
        <script src="https://cdn.datatables.net/searchbuilder/1.5.0/js/dataTables.searchBuilder.min.js" type="text/javascript"></script>
        <style type="text/css">
            body {
                font-family: 'Roboto Condensed', sans-serif;
                font-size: 8pt;
                margin: 0px;
            }
​
            input {
                font-size: 8pt;
            }
​
            .main-section {
                margin-top: 0px;
            }
        </style>
        <style type="text/css">
            td:first-child {
                white-space: nowrap;
            }
​
            td::before,
            td.sorting_1::before {
                color: #007bff !important;
            }
​
            div.dataTables_wrapper {
                margin: 5px;
            }
​
            thead input {
                padding: -3px;
                width: 100%;
                box-sizing: border-box;
            }
​
            tfoot input {
                padding: -3px;
                width: 100%;
                box-sizing: border-box;
            }
        </style><noscript>
            <style type="text/css">
                table {
                    border-collapse: collapse;
                    box-sizing: border-box;
                    width: 100%;
                }
​
                table td {
                    border-width: 1px;
                    padding: 4px;
                    text-align: left;
                    border-top: 1px solid #ddd;
                }
​
                table thead th {
                    text-align: center;
                    font-weight: bold;
                    padding: 4px 17px;
                    border-bottom: 1px solid #111;
                    background-color: white;
                    color: black;
                }
​
                table tfoot th {
                    text-align: center;
                    font-weight: bold;
                    padding: 4px 17px;
                    border-top: 1px solid #111;
                    background-color: white;
                    color: black;
                }
​
                table tr:nth-of-type(odd) {
                    background-color: #F6F6F5;
                }
​
                table tr:nth-of-type(even) {
                    background-color: white;
                }
​
                table td,
                table th {
                    border: 1px solid black;
                }
            </style>
        </noscript>
        <style type="text/css">
            div.dt-button-collection {
                margin-bottom: 10px !important;
                position: relative;
                width: auto !important;
                margin-top: 10px !important;
            }
        </style>
        <style type="text/css">
            .overflowHidden {
                overflow: hidden;
                overflow-x: hidden;
                overflow-y: hidden;
            }
​
            .flexParent {
                display: flex;
                justify-content: space-between;
            }
​
            .flexParentInvisible {
                display: flex;
                justify-content: space-between;
            }
​
            .flexElement {
                flex-basis: 100%;
                max-width: 100%;
            }
​
            .flexPanel {
                flex-basis: 100%;
                max-width: 100%;
            }
​
            .flex-grid {
                display: flex;
            }
        </style>
    </head>
​
    <body>
        <div class="main-section">
            <script>                $(document).ready(function () {
                    $.fn.dataTable.moment('L');
​
​
​
                    //  Table code
                    var table = $('#DT-jqRLqTKZ').DataTable(
                        {
                            "dom": "ABfrtip",
                            "searchFade": false,
                            "scrollCollapse": false,
                            "ordering": true,
                            "order": [],
                            "rowGroup": "",
                            "info": true,
                            "procesing": true,
                            "select": true,
                            "searching": true,
                            "stateSave": true,
                            "paging": true,
                            "pagingType": ["full_numbers"],
                            "lengthMenu": [[15, 25, 50, 100, -1], [15, 25, 50, 100, "All"]],
                            "language": {
                            },
                            "buttons": [{
                                "extend": "copyHtml5"
                            }, {
                                "extend": "excelHtml5",
                                "exportOptions": {
                                    "format": {
                                        body: function (data, row, column, node) {
                                            data = $('<p>' + data + '</p>').text(); return $.isNumeric(data.replace(',', '.')) ? data.replace(',', '.') : data;
                                        }
                                    }
                                }
                            }, {
                                "extend": "csvHtml5",
                                "text": "CSV",
                                "charset": "utf-8",
                                "extension": ".csv",
                                "fieldSeparator": ";",
                                "bom": true
                            }, {
                                "extend": "pdfHtml5",
                                "pageSize": "A3",
                                "orientation": "landscape"
                            }, {
                                "extend": "pageLength"
                            }, {
                                "extend": "searchBuilder"
                            }],
                            "responsive": {
                                "details": {
                                    "type": "inline",
                                    "display": $.fn.dataTable.Responsive.display.childRowImmediate
                                }
                            },
                            "columnDefs": [{
                                "targets": 4,
                                "render": $.fn.dataTable.render.percentBar('', '', '', '', '', 0, '')
                            }, {
                                "targets": 3,
                                "render": $.fn.dataTable.render.percentBar('round', '#ffffff', '#808080', '#ffd700', '#0000ff', 0, 'ridge', [
                                    { "min": 0, "max": 10, "backgroundColor": "#0000ff", "textColor": "#ffffff", "barColor": "#ff0000" },
                                    { "min": 11, "max": 20, "backgroundColor": "#0000ff", "textColor": "#ffffff", "barColor": "#008000" },
                                    { "min": 21, "max": 25, "backgroundColor": "#0000ff", "textColor": "#ffffff", "barColor": "#b05c52" },
                                    { "min": 26, "max": 85, "backgroundColor": "#808080", "textColor": "#000000", "barColor": "#00ffff" },
                                    { "min": 86, "max": 100, "backgroundColor": "#0000ff", "textColor": "#ffffff", "barColor": "#ffff00" }
                                ])
                            }]
                        }
                    );
                });</script>
            <div class="flexElement overflowHidden">
                <table class="dataTables display compact" width="100%" id="DT-jqRLqTKZ">
                    <thead>
                        <tr>
                            <th>Test</th>
                            <th>Test2</th>
                            <th>Test3</th>
                            <th>Test4</th>
                            <th>Percents</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Name</td>
                            <td>Name2</td>
                            <td>Name3</td>
                            <td>1.42</td>
                            <td>50</td>
                        </tr>
                        <tr>
                            <td>Name</td>
                            <td>Name2</td>
                            <td>Name3</td>
                            <td>5.72</td>
                            <td>5</td>
                        </tr>
                        <tr>
                            <td>Name</td>
                            <td>Name2</td>
                            <td>Name3</td>
                            <td>16.22</td>
                            <td>17</td>
                        </tr>
                        <tr>
                            <td>Name</td>
                            <td>Name2</td>
                            <td>Name3</td>
                            <td>23.73</td>
                            <td>99</td>
                        </tr>
                        <tr>
                            <td>Name</td>
                            <td>Name2</td>
                            <td>Name3</td>
                            <td>50.73</td>
                            <td>105</td>
                        </tr>
                        <tr>
                            <td>Name</td>
                            <td>Name2</td>
                            <td>Name3</td>
                            <td>90</td>
                            <td>105</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <th>Test</th>
                            <th>Test2</th>
                            <th>Test3</th>
                            <th>Test4</th>
                            <th>Percents</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </body>
​
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers