How to eliminate the empty rows from the jTable jQuery?

Question

I have two jTables in my web page, which loads data from a database. The first jTable fetches the data directly from the database and the second table loads its data according to the selected data in the first table.

The problem now I am facing is, in-case if there are no data to be fetched for the second table, from the particular selected row, the rows are displaying empty.

For example, I have selected a data in the table 1, but since there is no data related to the selected data, the second table is displaying empty rows.

How to hide or not to fetch if the rows were completely empty at the same time if the row has even a single entry I wanted to display that row.

I am using python in the back end to fetch the data. So, do I need to make changes in my python code or do I need to make a change in the front end jQuery or CSS.

I have tried to use the jQuery, it is not working as expected.

My first jTable code is:

$('#SelectCode').jtable({
    selecting: true,
    paging: true,
    actions: {
    listAction:// my back end connection here
    },
    fields: {
        codes: {
            title: 'Code',
        },
        name:{
          title: 'Name',
        },
    },
    selectionChanged: function () {
    var $selectedRows = $('#SelectCode').jtable('selectedRows');
        if ($selectedRows.length > 0) {
            $selectedRows.each(function () {
                var record = $(this).data('record');
                Code = record.event_codes;
               $('#System').jtable('load',{code:(SelectedCode)});

            });
    },
});

My second jTable code is:

    $('#System').jtable({
        selecting: true,
        paging: true,
        actions: {
            listAction:// my back end connection here
        },
        fields: {
            date:{
                title:'Date',
            },
            Time:{
              title:'Time'
            },
    },
});

So, can someone, please help me how can I achieve in eliminating the empty rows from the table.

Thanks,

Answer 1

I have achieved it by adding the following line of codes in my jTable fields:

 display: function(data) {
                   if (data.record.date == null) {
                        $("#System tr").each(function() {
                        var cellText = $.trim($(this).text());
                        if (cellText.length == 0) {
                          $(this).hide();
                            }
                        });
                    }
                    return data.record.date;
                },