DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Hide null grouping

Hide null grouping

petercdobbspetercdobbs Posts: 3Questions: 0Answers: 0
in DataTables 1.10

I'm looking for a way to hide groupings that are null. Currently it displays "no group" and empty rows.

Here's my generated UI:

Note: the nesting of the rows is CSS.

Here's my configuration:

productCategorizationTable = $('#productCategorizationTable').DataTable({
    destroy : true,
    autoWidth : false,
    scrollCollapse : false,
    ordering: false,
    order: [[3, 'desc'],[2, 'asc'],[7, 'desc'],[6, 'asc'],[11, 'desc'],[10, 'asc'],[15, 'desc'],[14, 'asc'],[19, 'desc'],[18, 'asc'],[23, 'desc'],[22, 'asc'],[27, 'desc'],[26, 'asc']],
    rowGroup: {dataSrc: [ 'CategoryMasterName','CategoryName','Group1Name','Group2Name','Group3Name','Group4Name']},
    stateSave: false,
    paging: false,
    deferRender: true,
    scroller: true,
    info: false,
    scrollY: 500,
    scrollX: true,
    columnDefs: [
        {
            targets: [ 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,26,27 ],
            visible: false
        }
    ],
    language: {
        search: '<span>Filter:</span> _INPUT_',
        searchPlaceholder: 'Type to filter...'
    },
    ajax: {
        "url":  "?ts=" + Math.floor(Date.now() / 1000),
        "type": "POST",
        "data": {
            "action": "adminProduct:GetCategorizationDataTable",
            "datatype": "json"
        } 
    },
    columns: [
        { "data": "CategoryMasterId" },
        { "data": "CategoryMasterName" },
        { "data": "CategoryMasterBareName" },
        { "data": "CategoryMasterStatus" },
        { "data": "CategoryId" },
        { "data": "CategoryName" },
        { "data": "CategoryBareName" },
        { "data": "CategoryStatus" },
        { "data": "Group1Id" },
        { "data": "Group1Name" },
        { "data": "Group1BareName" },
        { "data": "Group1Status" },
        { "data": "Group2Id" },
        { "data": "Group2Name" },
        { "data": "Group2BareName" },
        { "data": "Group2Status" },
        { "data": "Group3Id" },
        { "data": "Group3Name" },
        { "data": "Group3BareName" },
        { "data": "Group3Status" },
        { "data": "Group4Id" },
        { "data": "Group4Name" },
        { "data": "Group4BareName" },
        { "data": "Group4Status" },
        { "data": "Group5Id" },
        { "data": "Group5Name" },
        { "data": "Group5BareName" },
        { "data": "Group5Status" }
    ]
});

Here's a sample of my data:

{
"data": [
{
"CategoryMasterId": "1",
"CategoryMasterName": "<span class=\"dtCategoryMaster\">Common</span>",
"CategoryMasterBareName": "Common",
"CategoryMasterStatus": "1",
"CategoryId": "5",
"CategoryName": "<span class=\"dtCategory\">IN PROGRESS</span>",
"CategoryBareName": "IN PROGRESS",
"CategoryStatus": "1",
"Group1Id": "57212",
"Group1Name": "<span class=\"dtGroup1\">Barcode Feed</span>",
"Group1BareName": "Barcode Feed",
"Group1Status": "1",
"Group2Id": null,
"Group2Name": null,
"Group2BareName": null,
"Group2Status": null,
"Group3Id": null,
"Group3Name": null,
"Group3BareName": null,
"Group3Status": null,
"Group4Id": null,
"Group4Name": null,
"Group4BareName": null,
"Group4Status": null,
"Group5Id": null,
"Group5Name": null,
"Group5BareName": null,
"Group5Status": null
},
{
"CategoryMasterId": "1",
"CategoryMasterName": "<span class=\"dtCategoryMaster\">Common</span>",
"CategoryMasterBareName": "Common",
"CategoryMasterStatus": "1",
"CategoryId": "5",
"CategoryName": "<span class=\"dtCategory\">IN PROGRESS</span>",
"CategoryBareName": "IN PROGRESS",
"CategoryStatus": "1",
"Group1Id": "57211",
"Group1Name": "<span class=\"dtGroup1\">Barcode Feed - INACTIVE ONLY</span>",
"Group1BareName": "Barcode Feed - INACTIVE ONLY",
"Group1Status": "1",
"Group2Id": null,
"Group2Name": null,
"Group2BareName": null,
"Group2Status": null,
"Group3Id": null,
"Group3Name": null,
"Group3BareName": null,
"Group3Status": null,
"Group4Id": null,
"Group4Name": null,
"Group4BareName": null,
"Group4Status": null,
"Group5Id": null,
"Group5Name": null,
"Group5BareName": null,
"Group5Status": null
},
{
"CategoryMasterId": "1",
"CategoryMasterName": "<span class=\"dtCategoryMaster\">Common</span>",
"CategoryMasterBareName": "Common",
"CategoryMasterStatus": "1",
"CategoryId": "5",
"CategoryName": "<span class=\"dtCategory\">IN PROGRESS</span>",
"CategoryBareName": "IN PROGRESS",
"CategoryStatus": "1",
"Group1Id": "45973",
"Group1Name": "<span class=\"dtGroup1\">Needs Brand</span>",
"Group1BareName": "Needs Brand",
"Group1Status": "1",
"Group2Id": null,
"Group2Name": null,
"Group2BareName": null,
"Group2Status": null,
"Group3Id": null,
"Group3Name": null,
"Group3BareName": null,
"Group3Status": null,
"Group4Id": null,
"Group4Name": null,
"Group4BareName": null,
"Group4Status": null,
"Group5Id": null,
"Group5Name": null,
"Group5BareName": null,
"Group5Status": null
},
{
"CategoryMasterId": "1",
"CategoryMasterName": "<span class=\"dtCategoryMaster\">Common</span>",
"CategoryMasterBareName": "Common",
"CategoryMasterStatus": "1",
"CategoryId": "5",
"CategoryName": "<span class=\"dtCategory\">IN PROGRESS</span>",
"CategoryBareName": "IN PROGRESS",
"CategoryStatus": "1",
"Group1Id": "45974",
"Group1Name": "<span class=\"dtGroup1\">Needs Cross Sell</span>",
"Group1BareName": "Needs Cross Sell",
"Group1Status": "1",
"Group2Id": null,
"Group2Name": null,
"Group2BareName": null,
"Group2Status": null,
"Group3Id": null,
"Group3Name": null,
"Group3BareName": null,
"Group3Status": null,
"Group4Id": null,
"Group4Name": null,
"Group4BareName": null,
"Group4Status": null,
"Group5Id": null,
"Group5Name": null,
"Group5BareName": null,
"Group5Status": null
},
{
"CategoryMasterId": "1",
"CategoryMasterName": "<span class=\"dtCategoryMaster\">Common</span>",
"CategoryMasterBareName": "Common",
"CategoryMasterStatus": "1",
"CategoryId": "5",
"CategoryName": "<span class=\"dtCategory\">IN PROGRESS</span>",
"CategoryBareName": "IN PROGRESS",
"CategoryStatus": "1",
"Group1Id": "45972",
"Group1Name": "<span class=\"dtGroup1\">Needs Description - ACTIVE ONLY</span>",
"Group1BareName": "Needs Description - ACTIVE ONLY",
"Group1Status": "1",
"Group2Id": null,
"Group2Name": null,
"Group2BareName": null,
"Group2Status": null,
"Group3Id": null,
"Group3Name": null,
"Group3BareName": null,
"Group3Status": null,
"Group4Id": null,
"Group4Name": null,
"Group4BareName": null,
"Group4Status": null,
"Group5Id": null,
"Group5Name": null,
"Group5BareName": null,
"Group5Status": null
},
{
"CategoryMasterId": "1",
"CategoryMasterName": "<span class=\"dtCategoryMaster\">Common</span>",
"CategoryMasterBareName": "Common",
"CategoryMasterStatus": "1",
"CategoryId": "5",
"CategoryName": "<span class=\"dtCategory\">IN PROGRESS</span>",
"CategoryBareName": "IN PROGRESS",
"CategoryStatus": "1",
"Group1Id": "45204",
"Group1Name": "<span class=\"dtGroup1\">Needs Images - CATEGORIZED ONLY</span>",
"Group1BareName": "Needs Images - CATEGORIZED ONLY",
"Group1Status": "1",
"Group2Id": null,
"Group2Name": null,
"Group2BareName": null,
"Group2Status": null,
"Group3Id": null,
"Group3Name": null,
"Group3BareName": null,
"Group3Status": null,
"Group4Id": null,
"Group4Name": null,
"Group4BareName": null,
"Group4Status": null,
"Group5Id": null,
"Group5Name": null,
"Group5BareName": null,
"Group5Status": null
}
]
}

Replies

  • petercdobbspetercdobbs Posts: 3Questions: 0Answers: 0

    Found the answer myself...

        rowGroup: {
        dataSrc: [ 'CategoryMasterName','CategoryName','Group1Name','Group2Name','Group3Name','Group4Name','Group5Name'],
        **emptyDataGroup: null**
    },
  • petercdobbspetercdobbs Posts: 3Questions: 0Answers: 0

    If you are interested in my final solution (till i edit it again...)

    I simplified the JSON and moved the UI rendering to the initialization script.

    productCategorizationTable = $('#productCategorizationTable').DataTable({
    destroy : true,
    autoWidth : false,
    scrollCollapse : false,
    ordering: false,
    order: [[2, 'desc'],[1, 'asc'],[5, 'desc'],[4, 'asc'],[8, 'desc'],[7, 'asc'],[11, 'desc'],[10, 'asc'],[14, 'desc'],[13, 'asc'],[17, 'desc'],[16, 'asc'],[20, 'desc'],[19, 'asc']],
    rowGroup: {

        startRender: function ( rows, group, level ) {
            let thisId = '';
            let thisName = '';
            let thisClass = '';
            let thisIcon = '';
            let thisStatus = '';
            let statusIcon = '';
            //console.log(level);
            //console.log(group);
            //console.log(rows);
            if(level===0){
                thisId = rows.data().pluck('CategoryMasterId');
                thisName = rows.data().pluck('CategoryMasterName');
                thisClass = 'dtCategoryMaster';
                thisIcon = '<i class="icon-tree6 mr-2"></i>';
                thisStatus = rows.data().pluck('CategoryMasterStatus');
            }
            if(level===1){
                thisId = rows.data().pluck('CategoryId');
                thisName = rows.data().pluck('CategoryName');
                thisClass = 'dtCategory';
                thisIcon = '<i class="icon-arrow-small-right mr-2"></i>';
                thisStatus = rows.data().pluck('CategoryStatus');
            }
            if(level===2){
                thisId = rows.data().pluck('Group1Id');
                thisName = rows.data().pluck('Group1Name');
                thisClass = 'dtGroup1 dtGroup';
                thisStatus = rows.data().pluck('Group1Status');
            }
            if(level===3){
                thisId = rows.data().pluck('Group2Id');
                thisName = rows.data().pluck('Group2Name');
                thisClass = 'dtGroup2 dtGroup';
                thisStatus = rows.data().pluck('Group2Status');
            }
            if(level===4){
                thisId = rows.data().pluck('Group3Id');
                thisName = rows.data().pluck('Group3Name');
                thisClass = 'dtGroup3 dtGroup';
                thisStatus = rows.data().pluck('Group3Status');
            }
            if(level===5){
                thisId = rows.data().pluck('Group4Id');
                thisName = rows.data().pluck('Group4Name');
                thisClass = 'dtGroup4 dtGroup';
                thisStatus = rows.data().pluck('Group4Status');
            }
            if(level===6){
                thisId = rows.data().pluck('Group5Id');
                thisName = rows.data().pluck('Group5Name');
                thisClass = 'dtGroup5 dtGroup';
                thisStatus = rows.data().pluck('Group5Status');
            }
            if(thisStatus[0]==0){
                statusIcon = '<span class="ml-2 badge badge-light badge-striped badge-striped-left border-left-info">inactive</span>'
            }
            if(!thisId[0]){
                return null
            }
            else {
                return $('<tr/>')
                .append( '<td class="'+thisClass+'" data-id="'+thisId[0]+'">'+thisIcon+thisName[0]+statusIcon+'</td>' );
            }           
        },
        dataSrc: [ 'CategoryMasterName','CategoryName','Group1Name','Group2Name','Group3Name','Group4Name','Group5Name'],
        emptyDataGroup: null
    },
    stateSave: true,
    paging: false,
    deferRender: false,
    scroller: true,
    info: false,
    scrollY: 500,
    scrollX: true,
    columnDefs: [
        {
            targets: [ 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
            visible: false
        }
    ],
    language: {
        search: '<span>Filter:</span> _INPUT_',
        searchPlaceholder: 'Type to filter...'
    },
    ajax: {
        "url":  "?ts=" + Math.floor(Date.now() / 1000),
        "type": "POST",
        "data": {
            "action": "adminProduct:GetCategorizationDataTable",
            "datatype": "json"
        } 
    },
    columns: [
        { "data": "CategoryMasterId" },
        { "data": "CategoryMasterName" },
        { "data": "CategoryMasterStatus" },
        { "data": "CategoryId" },
        { "data": "CategoryName" },
        { "data": "CategoryStatus" },
        { "data": "Group1Id" },
        { "data": "Group1Name" },
        { "data": "Group1Status" },
        { "data": "Group2Id" },
        { "data": "Group2Name" },
        { "data": "Group2Status" },
        { "data": "Group3Id" },
        { "data": "Group3Name" },
        { "data": "Group3Status" },
        { "data": "Group4Id" },
        { "data": "Group4Name" },
        { "data": "Group4Status" },
        { "data": "Group5Id" },
        { "data": "Group5Name" },
        { "data": "Group5Status" }
    ]
});

productCategorizationTable.on( 'draw', function () {
        $('.dtGroup').on('click',function(){
            let myId = $(this).data('id');
            getCategorizationGroup(myId);
        })
        $('.dtCategory').on('click',function(){
            let myId = $(this).data('id');
            getCategorizationCategory(myId);
        })
        $('.dtCategoryMaster').on('click',function(){
            let myId = $(this).data('id');
            getCategorizationMaster(myId);
        })
} );

    Here's a sample of my JSON returned from the AJAX call:

    {
    "data": [
    {
    "CategoryMasterId": "1",
    "CategoryMasterName": "Common",
    "CategoryMasterStatus": "1",
    "CategoryId": "5",
    "CategoryName": "IN PROGRESS",
    "CategoryStatus": "1",
    "Group1Id": "57212",
    "Group1Name": "Barcode Feed",
    "Group1Status": "1",
    "Group2Id": null,
    "Group2Name": null,
    "Group2Status": null,
    "Group3Id": null,
    "Group3Name": null,
    "Group3Status": null,
    "Group4Id": null,
    "Group4Name": null,
    "Group4Status": null,
    "Group5Id": null,
    "Group5Name": null,
    "Group5Status": null
    },
    {
    "CategoryMasterId": "1",
    "CategoryMasterName": "Common",
    "CategoryMasterStatus": "1",
    "CategoryId": "5",
    "CategoryName": "IN PROGRESS",
    "CategoryStatus": "1",
    "Group1Id": "57211",
    "Group1Name": "Barcode Feed - INACTIVE ONLY",
    "Group1Status": "1",
    "Group2Id": null,
    "Group2Name": null,
    "Group2Status": null,
    "Group3Id": null,
    "Group3Name": null,
    "Group3Status": null,
    "Group4Id": null,
    "Group4Name": null,
    "Group4Status": null,
    "Group5Id": null,
    "Group5Name": null,
    "Group5Status": null
    },
    {
    "CategoryMasterId": "1",
    "CategoryMasterName": "Common",
    "CategoryMasterStatus": "1",
    "CategoryId": "5",
    "CategoryName": "IN PROGRESS",
    "CategoryStatus": "1",
    "Group1Id": "45973",
    "Group1Name": "Needs Brand",
    "Group1Status": "1",
    "Group2Id": null,
    "Group2Name": null,
    "Group2Status": null,
    "Group3Id": null,
    "Group3Name": null,
    "Group3Status": null,
    "Group4Id": null,
    "Group4Name": null,
    "Group4Status": null,
    "Group5Id": null,
    "Group5Name": null,
    "Group5Status": null
    },
    {
    "CategoryMasterId": "1",
    "CategoryMasterName": "Common",
    "CategoryMasterStatus": "1",
    "CategoryId": "5",
    "CategoryName": "IN PROGRESS",
    "CategoryStatus": "1",
    "Group1Id": "45974",
    "Group1Name": "Needs Cross Sell",
    "Group1Status": "1",
    "Group2Id": null,
    "Group2Name": null,
    "Group2Status": null,
    "Group3Id": null,
    "Group3Name": null,
    "Group3Status": null,
    "Group4Id": null,
    "Group4Name": null,
    "Group4Status": null,
    "Group5Id": null,
    "Group5Name": null,
    "Group5Status": null
    }
    ]
    }

    The CSS:

    productCategorizationTable .dtrg-group{

    background-color: #FFFFFF;

    }

    .dtCategoryMaster{
    font-weight: bold;
    }

    .dtCategory{
    padding-left: 25px !important;
    }

    .dtGroup1{
    padding-left: 60px !important;
    }

    .dtGroup2{
    padding-left: 80px !important;
    }

    .dtGroup3{
    padding-left: 100px !important;
    }

    .dtGroup4{
    padding-left: 120px !important;
    }

    .dtGroup5{
    padding-left: 140px !important;
    }

    And here's what it looks like:

Sign In or Register to comment.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.