Rule Renaming Grouping

HTML

<script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Map Columns</th>
        </tr>
    </thead>
    <tbody>
        <tr data-restagencies='["agency1==1","agency3==3","agency4==4","agency5==5","agency6==6","agency7==7","agency9==9","agency10==10","agency11==11","agency12==12","agency14==14","agency15==15","agency16==16","agency18==18"]'>
            <td class="details-control" data-agencies='["agency2==2", "agency13==13","agency17==17","agency8==8"]'></td>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
            <td>
                <button type="button" class="btn">Assign Agencies</button>
            </td>
        </tr>
        <tr data-restagencies='["agency1==1","agency3==3","agency4==4","agency5==5","agency6==6","agency7==7","agency9==9","agency10==10","agency11==11","agency12==12","agency13==13","agency14==14","agency15==15","agency16==16","agency17==17"]'>
            <td class="details-control" data-agencies='["agency2==2", "agency4==4","agency8==8","agency18==18"]'></td>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
            <td>
                <button type="button" class="btn">Assign Agencies</button>
            </td>
        </tr>
        <tr...

CSS

td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}
#divPopUp label {
    display: block;
    font-size: 13px  !important;
    font-family: Tahoma, sans-serif  !important;
}
#divPopUp  {
    background-color: #FFFFCD;
    height: 200px !important;
    overflow: scroll !important;
}

JavaScript

0/* Formatting function for row details - modify as you need */

function format(d) {
    // `d` is the original data object for the row
    return '<fieldset> <legend>    Agencies  </legend>   <table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' + $.map(d.agencies, function (v) {
        return '<tr>' +
            '<td bgcolor="#FFFFCD">' + v.split('==')[0] + '</td>' +
            '</tr>'

    }).join('') +
        '</table> </fieldset>'

}

function diff(A, B) {
    return A.filter(function (a) {
        return B.indexOf(a) == -1;
    });
}

function addCheckbox(array) {
    var container = $('#divPopUp').empty();
    $.each(array, function (index, value) {
        var idAndName = value.split('==');
        $("<label><input type='checkbox' value='" + idAndName[1] + "' />" + idAndName[0] + "                </label>").appendTo(container)
    });
}

$(document).ready(function () {
    var table = $('#example').DataTable();

    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row(tr);

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        } else {
            // Open this row
            row.child(format($(this).data())).show();
            tr.addClass('shown');
        }
    });
    // End add event 

    $("#divPopUp").dialog({
        resizable: true,
        autoOpen: false,
        width: 550,
        modal: true,
        buttons: {
            "Save": function () {
                var text = $(this).find(":checkbox:checked").map(function () {
                    return this.value + ' ';
                }).get().join();

                var obj = $(this).data("opener");
                $(obj).parents('td:first').siblings(':eq(2)').find(':text').val(text);
               ...