Child rows contained in a subtable are not sortable

tjahelka

I have an application that requires the detail rows to be another DataTable with support for column sorting and filtering. Initially this was implemented with the 1.9.4 of datatables but I could not get the sorting of the subtable to work. I've tried upgrading to 1.10.4 but the sorting still doesn't work.

Config for the subtable is:

{
"data": "movieSeries",
"order": [[0, "asc"]],
"columns": [
{"title": "Title", "data": "title"},
{"title": "Date Published", "data": "date"},
{"title": "# of Pages", "data": "pages"},
{"title": "Movie Release Year", "data": "movieReleaseYr"}
]
}

Data is:

    {
        "series": "Harry Potter",
        "books": [
        {
            "title": "Harry Potter and the Philosopher's Stone",
            "date": "6/1997",
            "pages": "309",
            "movieReleaseYr": "2001"
        },
        {
            "title": "Harry Potter and the Chamber of Secrets",
            "date": "7/1998",
            "pages": "341",
            "movieReleaseYr":"2002"
        }
     }

Subtable is rendered by when a click handler for tr fires. Click handler calls oTable.fnOpen(row, html, htmlClass). HTML for the subtable is below.

Title	Date Published	# of Pages	Movie Release Year
Harry Potter and the Chamber of Secrets	7/1998	341	2002
Harry Potter and the Deathly Hollows	7/2007	652	2010, 2011
Harry Potter and the Goblet of Fire	8/2000	734	2005
Harry Potter and the Half-Blood Prince	7/2005	652	2009
Harry Potter and the Order of the Phoenix	6/2003	870	2007
Harry Potter and the Philosopher's Stone	6/1997	309	2001
Harry Potter and the Prisoner of Azkaban	8/1999	435	2004

But when I look at the event listeners in the chrome web console, the <th> rows do not have a click handler for th.sorting.

CliffordCheng

You might want to try the child rows feature http://www.datatables.net/examples/api/row_details.html. The subtable needs to be enhanced on click for sorting, etc to work.

tjahelka

Clifford, Thank you, I had looked at that example but couldn't get it to work since upgrading to 1.10.4. We're still using the legacy style calls and we're instantiating our table with the .dataTable not the .DataTable so calls like row.child return undefined.

Do you know specifically which calls enhance the subtable so the sorting works?

tjahelka

I've modified my example, child table displays correct is still not sortable. New code:

function renderExample() {
$.getJSON("data/datatable5.json", function (data) {
var columns = {
"data": data,
"order": [[1, "asc"]],
"columns": [
{
"className": "details-control", "data": null, "orderable": false, "render": function (data, type, row) {
if (type === "display") {
return "<i class='fa fa-plus-square-o' title='Click to show details'/>";
}
return "";
}
},
{"title": "Series", "data": "series"},
{"title": "Author", "data": "author"}
],
"columnFilters": false
};

        var table = $("#nestedTables").DataTable(columns);

        // Add click handler for details
        $("#ex5dispResult tbody td i").on('click', function (e) {
            var tr = $(this).closest('tr');
            var row = table.row(tr);

            if (row.child.isShown()) {
                row.child.hide();
                this.className = "fa fa-plus-square-o";
                tr.removeClass('shown');
            } else {
                this.className = "fa fa-minus-square-o";

                // Get row data from parent table
                var data = row.data();

                row.child(crunchifyTableView(data.books));

                // Define new subtable to display as details
                var bookColumns = {
                    "order": [[0, "asc"]],
                    "columns": [
                        {"title": "Title", "data": "title"},
                        {"title": "Date Published", "data": "date"},
                        {"title": "# of Pages", "data": "pages"},
                        {"title": "Movie Release Year", "data": "movieReleaseYr"}
                    ],
                    "bFilter": false,
                    "bPaginate": false,
                    "columnFilters": false,
                    "bInfo": false
                };
                var subtable = $("#subtable").DataTable(bookColumns);
                row.child.show();
                tr.addClass("shown");
            }
        });
    });
});

}

function crunchifyTableView (books) {
"use strict";

var str = "<table id='subtable' class='details' cellspacing='0' border='20'>";

// Only create table head if needHeader is set to True..
str += '<thead><tr>';

for (var index in books[0]) {
    str += '<th scope="col">' + index + '</th>';
}
str += '</tr></thead>';

// table body
str += '<tbody>';
for (var i = 0; i < books.length; i++) {
    str += (i % 2 == 0) ? '<tr class="alt">' : '<tr>';
    for (var index in books[i]) {
        str += '<td>' + books[i][index] + '</td>';
    }
    str += '</tr>';
}
str += '</tbody>';
str += '</table>';
return str;

}