Таблицы данных: отображение итоговой строки для подстрок

Я новичок в Datatables...

Я делаю сетку строк, каждая из которых имеет подстроки (подробности). Я использую данные на стороне сервера из базы данных mysql. Он возвращается как JSON, содержащий все вложенные строки. Мне нужно создать «основные» строки сетки, суммируя столбцы из подстрок. Я не уверен, могут ли Datatables это сделать или как это делается...

Я думаю начать с получения JSON в функции JQuery. Затем с помощью цикла суммируйте данные, которые мне нужны, и передайте их в сетку как данные массива. Наконец, я визуализирую сетку.

Это лучшая практика или Datatables может сделать это более разумно?

-- концепцию вложенных строк можно увидеть здесь: http://datatables.net/blog/Drill-down_rows --


jquery-datatables
person olefrank    schedule 23.03.2013    source источник
comment
Непонятно, что вы имеете в виду подстрокой, можете ли вы опубликовать свой код? насколько я знаю, вам не нужно зацикливаться.   -  person OQJF    schedule 23.03.2013
comment
Под вложенными строками я подразумеваю строки деталей или строки детализации. Это концепция, которую я хочу: datatables.net/blog/Drill-down_rows Извините, но я не пока нет кода для публикации...   -  person olefrank    schedule 23.03.2013

Ответы (1)


arrow_upward
1
arrow_downward

Я закончил что-то вроде этого. Я вернул все нужные мне данные и поместил информацию «подробности» в последний столбец скрытого div. Затем использовали щелчок по строке, чтобы поместить эту информацию в строку сведений.

//In the example the table the first column has a plus icon that gets replace with a minus icon
// the last column added a hidden div that contained the details.
$("#results").dataTable({
    "fnCreatedRow": function (nRow, aData, iDataIndex) {
        //Attach the on click event to the row
        var oTable = this;
        $("td:eq(0) span", nRow).on("click", function () {
            //First column has a image with the jQuery UI plus icon
            if ($(this).hasClass("ui-icon-circle-plus")) {
                //The details information is stored in the last column in a hidden div with the class wrapper
                //Grab the hidden information and append that to the new row.
                oTable.fnOpen(nRow, $(".wraper", nRow).html(), "details");
            } else {
                oTable.fnClose(nRow);
            }
            $(this).toggleClass("ui-icon-circle-plus ui-icon-circle-minus");
        });
    }
});
person Bret    schedule 24.03.2013