Paging formatting in nested table

rmcarrier67

I'm having a problem with the formatting of the paging section of a nested table.

http://debug.datatables.net/oroxip

The words (first, next, last, previous) are simply hyperlinks with no formatting. I've noticed that an extra div is being placed around the footer section of the nested datatable

<div class="fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-bl ui-corner-br">
<div class="datatables_paginate fg-buttonset ui-buttonset-multi ui-buttonset-multi paging_simple" id="exampleTable_0_paginate">...

Since my datatables get their data from an Ajax method which is not accessible to the public, I'm not sure how to set up a DataTables live or JS Fiddle example to show the issue. Below is the JS that generates the parent and child tables. Any help would be greatly appreciated. TIA

    <script type="text/javascript">
        var oTable;
        var root = "@Url.Content("~")";
        var controllerName = '@ViewContext.RouteData.Values["Controller"].ToString()';


        function fnFormatDetails(table_id) {
            var sOut = "<table id=\"exampleTable_" + table_id + "\" class=\"display table table-condensed table-striped table-hover\" >";
            sOut += '<thead><tr><th>Edit Check Name</th><th>WMI</th><th>VinSchema Id</th><th>VinSchema</th><th>Keys</th>';
                sOut += '<th>Element Name</th><th>Attribute Value</th><th>Additional Info</th><th>ElementId</th><th>AttributeId</th><th>WMI ID</th><th>PatternId</th><th>Year</th></tr></thead>'
            sOut += "</table>";
            return sOut;
        }

        $(document).ready(function () {
            InitializeDataTable();
            NestedRowHandler();
        });

        function InitializeDataTable() {
            oTable = $('#tblDataTable').DataTable({
                "stateSave": true,
                "bJQueryUI": true,
                "serverSide": true,
                "bSort": false,
                "bFilter": false,
                "bInfo": false,
                "bPaginate":false,
                "sAjaxSource": root + "AjaxHandlers/AjaxHandlerEditChecks",
                "order": [[1, 'asc']],
                "pagingType": "full_numbers",
                "columns":
                    [{ "className": 'details-control', "orderable": false, "data": null, "defaultContent": "" },
                         { render: function (data, type, row) { if (data.toUpperCase() == 'WARNING') { return '<label class="label label-warning">' + data + '</label>' } else { return '<label class="label label-danger">' + data + '</label>' } } },
                         null, { data: null, className: "hidden" }, { data: null, className: "hidden" }, { data: null, className: "hidden" }, { render: function (data, type, row) { return '<label class="badge">' + data + '</label>' } }],
                "stateDuration": -1,
                "createdRow": function (row, data) {
                    if (data[6] == '0')
                        $('td', row).eq(0).removeClass('details-control');
                },
            });
        }

        var iTableCounter = 0;
        function NestedRowHandler()
        {
            $('#tblDataTable tbody').on('click', 'td.details-control', function () {
                var nTr = $(this).parents('tr')[0];
                var tr = $(this).closest('tr');
                var row = oTable.row(tr);
                var nTds = this;
                if (row.child.isShown()) {
                    /* This row is already open - close it */
                    row.child.hide();
                    this.src = "../../Images/details_close.png";
                    tr.removeClass('shown');
                }
                else {
                    /* Open this row */
                    var $row = $(this).closest('tr');
                    row.child(fnFormatDetails(iTableCounter)).show();
                    oInnerTable = $("#exampleTable_" + iTableCounter).dataTable({
                        "bJQueryUI": true,
                        "bFilter": true,
                        "bInfo" : true,
                        "serverSide": true,
                        "bSort": true,
                        "bPaginate": true,
                        "pagingType": "simple",
                        "columns": [{ data: null, className: "hidden" },
                            { render: function (data, type, row) { if (data != null) { return '<a href="' + root + 'wmis/details/' + row[10] + '">' + row[1] + '</a>' } else { return '' }} },
                            { data: null, className: "hidden" },
                            { render: function (data, type, row) { if (row[2] == 0) { return '' } else { return '<a href="' + root + 'vinschemas/details/' + row[2] + '">' + row[3] + '</a>' } } },
                            { render: function (data, type, row) { if (row[4] == 0 || row[4] == null) { return '' } else { return '<a href="' + root + 'patterns/createall/?vinschemaid=' + row[2] + '&pttrn=' + row[4] + '">' + data + '</a>' } } },
                            null, null, null,
                            { data: null, className: "hidden" }, { data: null, className: "hidden" }, { data: null, className: "hidden" }, { data: null, className: "hidden" }, null],
                        "ajax": {
                            "url": root + "AjaxHandlers/AjaxHandlerEditChecksDetails",
                            "type": "POST",
                            "data": function (d) {
                                console.log(d);
                                var tmp = $row.find(':nth-child(4)').text();
                                var tmp2 = tmp.lastIndexOf(",");
                                var recCount = tmp.substring(tmp2 + 1, tmp.length);
                                var subTmp = tmp.substring(0, tmp2);
                                tmp2 = subTmp.lastIndexOf(",");
                                var WMIId = tmp.substring(tmp2 + 1, subTmp.length);                             
                                subTmp = tmp.substring(0, tmp2);
                                tmp2 = subTmp.lastIndexOf(",");
                                var VinSchemaId = subTmp.substring(tmp2 + 1, subTmp.length);
                                subTmp = subTmp.substring(0, tmp2);
                                tmp2 = subTmp.lastIndexOf(",");
                                var EditCheckId = subTmp.substring(tmp2 + 1, subTmp.length);
                                var length = tmp.length;
                                d.EditCheckId = EditCheckId;
                                d.WMIId = WMIId;
                                d.VinSchemaId = VinSchemaId;
                                d.searchVal = d.search.value;
                                d.sortCol = d.order[0].column;
                                d.sortDir = d.order[0].dir;
                            }
                        }
                    });
                    iTableCounter = iTableCounter + 1;
                    tr.addClass('shown');
                }
            });
        }
    </script>