Squeak.ru - шаблоны программирования

Как сгруппировать по нескольким столбцам, jquery datatables

Начиная с datatables-row_grouping

У меня есть бизнес-требование для форматирования таблицы данных, где результаты сгруппированы по 2 столбцам.

Это то, что у меня есть для моей конфигурации с данными, которая дает результаты, близкие к тому, что мне нужно, однако я не могу получить значение второго столбца.

api.column(1 ниже) ссылается на первый столбец, мне также нужен столбец два (2). Я пробовал columns([1, 2] и ожидал получить массив результатов для .each(), но это был сбой .

var dtOptions = {
    "dom": '<"clearfix"><"pull-left"l><"pull-right"Bf>r<"horizontal-scroll"t><"pull-left"i><"pull-right"p><"clearfix">',
    "pageLength": 10,
    "paging": true,
    "columnDefs": [
    {
        "targets": groupCols, /// this is an array [1, 2]
        "visible": false
    }],
    "order": [[1, 'asc']],
    "displayLength": 15,
    "drawCallback": function ( settings ) {
        var api = this.api();
        var rows = api.rows( {page:'current'} ).nodes();
        var last = null;

        api.column(1, { page: 'current' }).data().each(function (group, i) {
            if (last !== group) {

                $(rows).eq(i).before(
                    '<tr class="group"><td colspan="3">' + group + '</td><td colspan="14">' + need_second_column_string_here + '</td></tr>'
                );

                last = group;
            }
        });
    }
}

Спасибо за любую помощь.

jquery datatables
23.01.2017

Ответы:


1

Думал, что поделюсь решением, которое сработало для меня .... см. $currTable.rows(rows[i]._DT_RowIndex).data()[0][CommentCol] в js ниже

var dtOptions = {
    "dom": '<"clearfix"><"pull-left"l<"toolbar">><"pull-right"Bf>r<"horizontal-scroll"t><"pull-left"i><"pull-right"p><"clearfix">',
    "pageLength": 10,
    "paging": false,
    "columnDefs": [
        { "visible": false, "targets": hiddenCols },
        { "orderable": false, "targets": allColumns }
    ],
    "sort": true,
    "order": [[0, 'asc'], [1, 'asc']],
    "displayLength": 15,
    "drawCallback": function (settings) {
        var api = this.api();
        var rows = api.rows({ page: 'current' }).nodes();
        var last = null;

        var CommentCol = -1;

        _.each(api.columns().header(), function (e, i) {
            if(e.innerHTML == "Comments"){
                CommentCol = i;
            }
        })

        api.column(groupByCol, { page: 'current' }).data().each(function (group, i, $currTable) {
            if (last !== group) {

                $(rows).eq(i).before(
                    '<tr class="group"><td class="nowrap" colspan="3">' + buttons + '<div style="margin-right:6px;"><b>Lot:</b> ' + group + '</div></td><td colspan="16"><b>Comments:</b> ' + $currTable.rows(rows[i]._DT_RowIndex).data()[0][CommentCol] + '</td></tr>'
                );

                last = group;
            }
        });
    }
}

Возможно, не изящно.... но эффектно.

01.02.2017

2

вы можете взломать свой путь через другие библиотеки. это стоит усилий ??.

или вы можете использовать табулятор. который имеет группировку из нескольких столбцов.

пример :

  //load data as json
    var tableData = [
        {id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
        {id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
        {id:3, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true"},
        {id:4, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980"},
        {id:5, name:"Margret Marmajuke", age:"16", gender:"female", height:5, col:"yellow", dob:"31/01/1999"},
        {id:6, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
    ]
    
    var table = new Tabulator("#example-table", {
        height:"311px",
        layout:"fitColumns",
         groupBy:function(data){ 
            return data.gender + " - " + data.age; //groups by data and age
        },
    autoColumns:true,
    });    

    table.setData(tableData);
<script src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet"/>


<div id="example-table"></div>

единственная таблица lib, которая может группироваться по нескольким столбцам, - это Tabulator, AFAIK.

вот другие библиотеки таблиц.

                   -------- group by  -------
                   single column | multi column  
tabulator       :        yes     | yes           |  
datatables.net  :        yes     | yes           |  
bootstrap-table :        yes     | no            | 
dynatable.js    :        no      | no            |

табулятор имеет бутстрап, простую белую тему:

читать далее:

23.05.2019
Новые материалы
Угловая структура архитектуры
Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..
«Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..
Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...
Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..
Создайте API с помощью Python FastAPI
Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..
Веселье с прокси-сервером JavaScript
Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..
Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...