DataTable Utilities

Documentation

On this page

• Control Table with Raw Data
• Column Data Manipulation Example 1
• Column Data Manipulation Example 2
• Table Footer With Static Totals
• Table Footer With Dynamic Totals updated when Filtered

Control Table with Raw Data

Column Data Manipulation Example 1

• .wb-col-mailto Wrap email Addresses with a <a href="mailto:...">email@example.net</a>
• .wb-col-money Format numbers as Money.
• .wb-col-url Stitch 2 columns (column-name, column-name-url) into a single URL / Caption or URL and URL as the caption if (column-name-url) does not exists within the JSON File.

    <table class="wb-tables table table-striped table-hover table-condensed small wb-tables-utility" id="t2"
            data-wb-tables='{ "ajax":"data/datatable-utility.json",
                            "columns": [{ "data": "DepartmentEN" },
                                        { "data": "ContactEmail" },
                                        { "data": "Custom study titleEN" },
                                        { "data": "Registration number" },
                                        { "data": "Contract value" }],
                                    "columnDefs": [{ "className": "text-left", "targets": [0]},
                                            { "className": "text-left wb-col-mailto", "targets": [1] },
                                            { "className": "text-left wb-col-url", "targets": [2] },
                                            { "className": "text-left", "targets": [3] },
                                            { "className": "text-right wb-col-money", "targets": [4] }],
                                                         "lengthMenu": [ [5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"] ]}'>

Column Data Manipulation Example 2

.wb-col-cur-thousand Format numbers with thousands separator with 2 decimals.

    <table class="wb-tables table table-striped table-hover table-condensed small wb-tables-utility" id="t3"
            data-wb-tables='{ "ajax":"data/datatable-utility.json",
                            "columns": [{ "data": "DepartmentEN" },
                                        { "data": "ContactEmail" },
                                        { "data": "Custom study titleEN" },
                                        { "data": "Registration number" },
                                        { "data": "Contract value" }],
                                    "columnDefs": [{ "className": "text-left", "targets": [0]},
                                            { "className": "text-left", "targets": [1] },
                                            { "className": "text-left", "targets": [2] },
                                            { "className": "text-left", "targets": [3] },
                                            { "className": "text-right wb-col-cur-thousand", "targets": [4] }],
                                                         "lengthMenu": [ [5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"] ]}'>

Table Footer With Static Totals

.wb-col-sum class on the column to perform column Total

Add a Placehoder <tfoot> at the bottom of the Table.

        <tfoot>
        <tr class="active">
        <th colspan="4">Total</th>
        <td>&nbsp;</td>
        </tr>
        </tfoot>

Code

Pass false via filteredsum to the plugin data-wb-tables-utility="{"filteredsum":false}" as the default is true

    <table class="wb-tables table table-striped table-hover table-condensed small wb-tables-utility" id="t4"
    data-wb-tables-utility="{"filteredsum":false}"
            data-wb-tables='{ "ajax":"data/datatable-utility.json",
                            "columns": [{ "data": "DepartmentEN" },
                                        { "data": "ContactEmail" },
                                        { "data": "Custom study titleEN" },
                                        { "data": "Registration number" },
                                        { "data": "Contract value" }],
                                    "columnDefs": [{ "className": "text-left", "targets": [0]},
                                            { "className": "text-left wb-col-mailto", "targets": [1] },
                                            { "className": "text-left wb-col-url", "targets": [2] },
                                            { "className": "text-left", "targets": [3] },
                                            { "className": "text-right wb-col-sum wb-col-money", "targets": [4] }],
                                                "lengthMenu": [ [5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"] ]}'>

Table Footer With Dynamic Totals updated when Filtered

.wb-col-sum class on the column to perform column Total

Add a Placehoder <tfoot> at the bottom of the Table.

        <tfoot>
            <tr class="active">
                <th colspan="4">Total</th>
                <td>&nbsp;</td>
            </tr>
        </tfoot>

Code

    <table class="wb-tables table table-striped table-hover table-condensed small wb-tables-utility" id="t5"
            data-wb-tables='{ "ajax":"data/datatable-utility.json",
                            "columns": [{ "data": "DepartmentEN" },
                                        { "data": "ContactEmail" },
                                        { "data": "Custom study titleEN" },
                                        { "data": "Registration number" },
                                        { "data": "Contract value" }],
                                    "columnDefs": [{ "className": "text-left", "targets": [0]},
                                            { "className": "text-left wb-col-mailto", "targets": [1] },
                                            { "className": "text-left wb-col-url", "targets": [2] },
                                            { "className": "text-left", "targets": [3] },
                                            { "className": "text-right wb-col-sum wb-col-money", "targets": [4] }],
                                                "lengthMenu": [ [5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"] ]}'>